There are three main event cases we are going to review in this chapter. With Angular, you can raise Component events, DOM events and Service events.
You can find the source code in the angular/events folder.
To address all three scenarios let's create a simple
Panel component that consists of the
The Header and Footer are going to be separate components.
First, generate a new Angular application using the Angular CLI tool. Then execute the following commands to generate the prerequisites:
ng g component panel ng g component panel-header ng g component panel-footer
Next, update the
Panel component template like in the example below:
<!-- src/app/panel/panel.component.html --> <app-panel-header></app-panel-header> <p> panel works! </p> <app-panel-footer></app-panel-footer>
Finally, we can replace the default auto-generated content of the main application template
Panel we have just created above:
<!-- src/app/app.component.html --> <app-panel> </app-panel>
If you make a pause at this point and run the
ng serve --open command you should see the following output on the main page:
panel-header works! panel works! panel-footer works!
At this point, we got all the basic prerequisites for testing the events.