Events

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.

Source Code

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 Body, Header and Footer. 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 with the 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.