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:
- Open the project in Visual Studio Code.
- Open the terminal and run
npm installto install the dependencies of the project. Once done, runng 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...
