Emit an event from a child to parent component in Angular 9

The @Output() decorator in Angular 9 marks a property in a child component as a doorway through which data can travel from the child to the parent. The child component then has to raise an event so the parent knows something has changed.

In order to make data flow from the child to the parent component, Angular has create the @Output() decorator so that when it is applied on a property in the child component it will make that property flow upward to the parent.

In this tutorial I will demonstrate how to create an event on a child component and have the event emit to the parent when the event gets triggered from the child component.

1 — Start a new Angular project

Create a new angular project by opening VScode and in the terminal type the following command:
>ng new emit-event-tutorial

Follow the instructions on the screen and allow angular to complete installing the required packages for the project. Once the project is created you will receive the following message in the terminal:
√ Packages installed successfully.

Now let’s do some house cleaning. Angular by default creates HTML content in app.component.html, we need to open the file and clear…