Components communication using component @Input(s) and @Output(s)

You'll start with an app with a parent component and two child components. You'll then use Angular @Input and @Ouput decorators to establish communication between them using attributes and EventEmitter(s).

Getting ready

The project that we are going to work with resides in chapter01/start_here/cc-inputs-outputs inside the cloned repository:

1. Open the project in Visual Studio Code.
2. Open the terminal and run npm install to install the dependencies of the project. Once done, run ng serve -o.

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

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

How to do it…

So far, we have an app with AppComponent, NotificationsButtonComponent, and NotificationsManagerComponent. While AppComponent is the parent of the other two components mentioned, there is absolutely...