Using setters for intercepting input property changes

In this recipe, you will learn how to intercept changes in an @Input passed from a parent component and how 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 start/apps/chapter01/cc-setters:

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

   npm run serve cc-setters
   

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

   

   Figure 1.6: The cc-setters app running on http://localhost:4200

How to do it…

1. We’ll first create...