AngularJs 2 Series: Custom Event Binding

Rajeev HathiDecember 27th, 2016Last Updated: December 23rd, 2016

3 58 2 minutes read

Introduction

In one of the previous article on databinding, I demonstrated the use of native event binding like button click. Here in this article I will show you how to create your own custom event and listen on to it. We will create a component with a custom event that will emit or send some data and another component will listen to that event and receive that data.

Custom Event Binding

Lets create a component class and name it as CustomEventComponent. The class will have a custom property event named action which will be an instance of type EventEmitter. The EventEmitter type is used to emit or send the events and another entity or component can listen to this event. Let’s first look at the code:

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

@Component({
  selector: 'custom-event',
  template: `
    <button (click)="onClick()">Click Me</button>
  `,
  styles: []
})
export class CustomEventComponent {
	@Output() private action = new EventEmitter<string>();
	
	onClick() {
		this.action.emit("This is the action");
	}
}

The above component class CustomEventComponent has a property action, an object of type EventEmitter. The action property represents an event. The EventEmitter class is part of Angular core package. Next we define a method named onClick() which will use the action event property to emit some text. Since we are emitting text, the EventEmitter is used with generic type <string>. You can use any other data types with the EventEmitter to emit the value of that type. The function onClick() will be invoked upon clicking the button which will then emit the text “This is the action”. Observe the meta data @Output() prefixed to the action event property. It means this event can be made listenable from another component. The Output meta data is part of Angular core package.
Let’s create another component called EventListenerComponent and here we will listen to the above defined action event for any text message and display the same. We will bind the event to the <custom-event> selector of the CustomEventComponent component class.

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

@Component({
  selector: 'event-listener',
  template: `
    <custom-event (action)="onReceive($event)"></custom-event>
  `,
  styles: []
})
export class EventListenerComponent {

	onReceive(message: string) {
		alert(message);
	}
}

As you can see from the above code, we are listening to the custom action event. Once the event is triggered it will invoke the onRecieve() method. The onRecieve() method takes $event object as a parameter which encapsulates the string that is emitted by the action event. In the onRecieve() method definition, we are simply displaying the text emitted by the action event. The output will display an alert box with the text “This is the action”.

Reference:

AngularJs 2 Series: Custom Event Binding from our WCG partner Rajeev Hathi at the TECH ORGAN blog.