Using setters for intercepting input property changes

In this recipe, you will learn about how to intercept changes in an @Input passed from a parent component and to perform some action on this event. We'll intercept the vName input passed from the VersionControlComponent parent component to the VcLogsComponent child component. We'll use setters to generate a log whenever the value of vName changes and will show those logs in the child component.

Getting ready

The project for this recipe resides in chapter01.start_here/cc-setters:

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.4 – The cc-setters app running on http://localhost:4200

How to do it…

1. We'll first create a logs array in VcLogsComponent as...