Sometimes the DOM events are not enough and there is a need to raise custom events. For example, a child component may need to emit an event and tell the parent component that it has updated itself. The parent component then listens to this event and may need to update itself. The flow of data in this case is one way, that is from the child component to parent component.

In Angular we can raise custom events. Our custom events can pass data according to our requirement. Custom event is a way of communication between components.

Usually the custom events are generated by directives and are used to communicate from child component to parent component. The steps to emit custom events and its use are:

• Step 1: Declare a property of type EventEmitter in child or the component who will emit the event.
  @Output() customMessageEvent = new EventEmitter();
  Decorate the property with @Output() decorator.
• Step 2: Emit the event with data using the emit method.
  this.customMessageEvent.emit('This message is sent from child');
• Step 3: Use the custom event property in the HTML using event binding syntax, i.e., enclosed in parentheses and define the template expression to be called when event is emitted.
  <app (customMessageEvent)="changeMessageInParent($event)"></app-child>
• When custom event is emitted, changeMessageInParent method of parent component will be called.

Example of custom events with EventEmitter

In this example, we’ll do the following:

1. Create two components, parent and child. Child component is used in parent component and thus two components have parent-child relationship.
2. When we click a button in child component, the child component will emit an event to the parent component with a message.
3. The parent component will listen to that event and will show the message received from the child component.

<div style="border: 1px solid black">
  <h1>This is parent Component</h1>
  <span>Message received from child component: {{ messageFromChild }}</span>
  <app-child (customMessageEvent)="changeMessageInParent($event)"></app-child>
</div>

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css'],
})
export class ParentComponent implements OnInit {
  messageFromChild: string = '';

  constructor() {}

  ngOnInit(): void {}

  changeMessageInParent(event: string) {
    this.messageFromChild = event;
  }
}

<div style="border: 1px solid black; width: 50%; margin: 10px 10px 10px 10px">
  <h2>This is child component</h2>
  <button type="button" (click)="sendMessageToParent()">Send message</button>
</div>

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
})
export class ChildComponent implements OnInit {
  @Output() customMessageEvent = new EventEmitter<string>();

  ngOnInit(): void {}

  sendMessageToParent() {
    this.customMessageEvent.emit('This message is sent from child');
  }
}

Let us now understand the example.

1. We have exposed a property customeMessageEvent in child component with @Output decorator. This property is of type EventEmitter. Our custom event emitter emits data of type string.
2. When the button is clicked in child component, we are calling sendMessageToParent method.
3. sendMessageToParent method emits custom event with data as string message This message is sent from child.
4. In parent component, we are using child component with our custom event property.
   <app-child (customMessageEvent)="changeMessageInParent($event)"></app-child>
5. Whenever custom event is emitted, changeMessageInParent method of parent component is called with event object $event. This event object contains the message received from the child component.
6. changeMessageInParent receives the data from event and set the messageFromChild property of parent. This messageFromChild property is then use to show message from the child on screen.

Conclusion

In this article we discussed how to raise custom events in Angular using EventEmitter. The example we used to demonstrate custom events is very simple. The data emitted can be simple as a string or even a complex object. Using event binding, components can communicate with each other, pass data and respond based on the events.

We hope this article was helpful. Happy learning!