Component events with EventEmitter and @Output in Angular blog post

Component events with EventEmitter and @Output in Angular

Todd Motto

17 Jul, 2019

Angular

6 minutes read

Angular components are the fundamental building blocks of architecture. Once you’ve understood component architecture, you can build a picture in your head as to how to assemble your interface based on data communication.

In this post we’re going to dive into Angular components and how to use the EventEmitter and Outputs, so we can transfer or notify any parent component that something has changed, or we would like to change it. This is typically done via “events”, hence our “EventEmitter” and is designed around a uni-directional data flow system that adopts a much more reasonable approach to application development.

Let’s finalise the basics of parent-child and child-parent communication by introducing EventEmitter and @Output.

Series

  1. Bootstrapping your first Angular app
  2. Creating your first Angular component
  3. Passing data into Angular components with @Input
  4. Component events with EventEmitter and @Output in Angular

Introduction

This tutorial will cover stateless component events using the EventEmitter API and @Output decorator. These allow us to emit change or any custom event names from a custom component in Angular.

This post follows from the previous article on passing data in Angular components with @Input, so be sure to read that first!

Stateful (parent) component binding

Much like in the previous tutorial, where we setup an @Input decorator to accept an input binding, we can do the same and listen in the parent for when a value changes inside our child component.

To do this, we’ll head back to our parent component that’s rendering out our count:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      Parent: {{ myCount }}
      <counter
        [count]="myCount"
        (change)="countChange($event)">
      </counter>
    </div>
  `
})
export class AppComponent {
  myCount: number = 10;
  countChange(event) {

  }
}

I’ve made a few additions here:

  • Changed initialCount to myCount, we are no longer setting an “initialCount”, therefore the count state will be managed in the parent once the child component makes a change to it
  • Created a custom change property to the <counter> template, using () event binding syntax, like we learned when we created our first component this signifies some kind of event (such as a click when used on a native element Node).
  • Logged the myCount property in the parent
  • Added a countChange() {} method to the class, and passed it into the (change) event listener

This sets up our finalised uni-directional dataflow. The data flows down from the AppComponent class, into the “, the counter can then change the values – and once the value has changed we expect countChange() to be called. We now need to wire this up.

@Output decorator

Much like using Input, we can import Output and decorate a new change property inside our CounterComponent:

import { Component, Input, Output } from '@angular/core';

@Component({...})
export class CounterComponent {

  @Input()
  count: number = 0;

  @Output()
  change;

  // ...

}

This will configure the metadata necessary to tell Angular this property is to be treated as an output binding. However, it needs to sit alongside something called the EventEmitter.

EventEmitter

This is the interesting part. To be able to use our Output, we need to import and bind a new instance of the EventEmitter to it:

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({...})
export class CounterComponent {

  // ...

  @Output()
  change = new EventEmitter();

  // ...

}

Using TypeScript to the fullest we’d do something like this to signify the type of event value we are emitting, and our change output is of type EventEmitter. In our case we are emitting a number type:

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({...})
export class CounterComponent {

  // ...

  @Output()
  change: EventEmitter<number> = new EventEmitter<number>();

  // ...

}

Invoking the EventEmitter

So what’s happening here? We’ve created a change property, and bound a new instance of EventEmitter to it – what next?

We can simply call our this.change method – however because it references an instance of EventEmitter, we have to call .emit() to emit an event to the parent:

@Component({...})
export class CounterComponent {

  @Input()
  count: number = 0;

  @Output()
  change: EventEmitter<number> = new EventEmitter<number>();

  increment() {
    this.count++;
    this.change.emit(this.count);
  }

  decrement() {
    this.count--;
    this.change.emit(this.count);
  }

}

This will then emit a change to our (change) listener we setup in the parent, to which our countChange($event) callback will be invoked, and the data associated with the event will be given to us via the $event property.

Stateful callback assignment

Here’s what we’ll need to do, re-assign this.myCount with the event that’s passed back. I’ll explain why below:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      Parent: {{ myCount }}
      <counter
        [count]="myCount"
        (change)="countChange($event)">
      </counter>
    </div>
  `
})
export class AppComponent {
  myCount: number = 10;
  countChange(event) {
    this.myCount = event;
  }
}

This creates a pure uni-directional dataflow. The data comes from AppComponent, flows into our counter, the counter makes a change, and emits that change back to the parent on our command – via the EventEmitter we setup. Once we’ve got that data back up, we merge those changes back into our parent (stateful) component.

The reason we’re doing this is to demonstrate that Parent: {{ myCount }} updates at the same time our Output informs the parent.

Bonus: custom property names

Much like we learned with @Input() and creating custom property names, we can also do the same with @Output().

Let’s assume that we change the (change) binding to (update):

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      Parent: {{ myCount }}
      <counter
        [count]="myCount"
        (update)="countChange($event)">
      </counter>
    </div>
  `
})
export class AppComponent {
  myCount: number = 10;
  countChange(event) {
    this.myCount = event;
  }
}

We can hook up our custom property name, whilst preserving the internal @Output property name:

@Component({...})
export class CounterComponent {

  // ...

  @Output('update')
  change: EventEmitter<number> = new EventEmitter<number>();

  increment() {
    this.count++;
    this.change.emit(this.count);
  }

  decrement() {
    this.count--;
    this.change.emit(this.count);
  }

}

Essentially, we’re just telling Angular here to lookup update as the property to be bound to, and we can continue using this.change internally.

So there you have it, the guide to using Outputs with EventEmitter in Angular’s components. Now you understand the model, happy coding!

About the author

Todd Motto profile picture

Todd Motto

GDE Google Developer Expert

Todd is the Founder of Ultimate Courses. With a passion for Angular, TypeScript and JavaScript, Todd leads the online courses creation and has written hundreds of articles on front-end web development and beyond. He specialises in breaking down complex topics and understands the critical mission of learning new technology fast, comprehensively and the right way.

Love the post? Share it!

Lots of time and effort go into all our blogs, resources and demos,
we'd love it if you'd spare a moment to share them!

Explore our Angular courses

Get started today and join over 50,000 developers.