Component Communication with @Output

When working with components it may be required to notify other components that something has happened. Perhaps a button has been clicked, an item has been added/removed from a list or some other important update has occurred. In this scenario components need to communicate with parent components.

Angular uses the @Output decorator to enable this type of behavior.

In this activity, you'll learn how to use the @Output decorator and EventEmitter to communicate with components.

To create the communication path from child to parent components, use the @Output decorator on a class property and assign it a value of type EventEmitter:

      
@Component({...})class ChildComponent {    @Output() incrementCountEvent = new EventEmitter<number>();}
    

Now the component can generate events that can be listened to by the parent component. Trigger events by calling the emit method:

      
class ChildComponent {    ...    onClick() {        this.count++;        this.incrementCountEvent.emit(this.count);    }}
    

The emit function will generate an event with the same type as the EventEmitter instance.

Alright, your turn to give this a try. Complete the code by following these tasks:

1. Add an @Output property

   Update child.component.ts by adding an output property called addItemEvent, be sure to set the EventEmitter type to be string.

2. Complete addItem method

   In child.component.ts update the addItem method; use the following code as the logic:

   child.component.ts

         
   addItem() {  this.addItemEvent.emit('🐢');}
       

3. Update the AppComponent template

   In app.component.ts update the template to listen to the emitted event by adding the following code:

         
   <app-child (addItemEvent)="addItem($event)" />
       

   Now, the "Add Item" button adds a new item to the list every time the button is clicked.

Wow, at this point you've completed the component fundamentals - impressive 👏

Keep learning to unlock more of Angular's great features.