Using ngOnChanges to intercept input property changes

In this recipe, you’ll learn how to use ngOnChanges to intercept changes using the SimpleChanges API. We’ll listen to a vName input passed from the VersionControlComponent parent component to the VcLogsComponent child component.

Getting ready

The app that we are going to work with resides in start/apps/chapter01/cc-ng-on-changes inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve cc-ng-on-changes
   

   This should open the app in a new browser tab, and you should see the following:

   

   Figure 1.10: The cc-ng-on-changes app running on http://localhost:4200

How to do it…

1. We’ll first create a logs array in VcLogsComponent as follows to store all the logs that we’ll display later using...