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 project for this recipe resides in chapter01/start_here/cc-ng-on-changes:

1. Open the project in Visual Studio Code.
2. Open the terminal and run npm install to install the dependencies of the project.
3. Once done, run ng serve -o. This should open the app in a new browser tab and you should see the app as follows:

Figure 1.7 – 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 our template:

   export class VcLogsComponent implements OnInit {
     @Input() vName...