Component communication using component @Input and @Output properties

You’ll start with an app with a parent component and two child components. You’ll then use Angular @Input and @Output decorators to establish communication between them using attributes and EventEmitter(s). The flow of the communication is shown in Figure 1.1.

Figure 1.1: Communication flow using @Input() and @Output() properties

Getting ready

The app that we are going to work with resides in start/apps/chapter01/cc-inputs-outputs 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-inputs-outputs
   

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

   

   Figure 1.2: The cc-inputs-outputs app running on http://localhost:4200

How to do it…

So far...