Home » JavaScript » Angular.js » AngularJs 2 Series: Custom Event Binding

About Rajeev Hathi

Rajeev Hathi
Rajeev is a senior Java architect and developer. He has been designing and developing business applications for various companies (both product and services). He is co-author of the book titled 'Apache CXF Web Service Development' and shares his technical knowledge through his blog platform techorgan.com

AngularJs 2 Series: Custom Event Binding


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';

  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';

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

	onReceive(message: string) {

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.
(0 rating, 0 votes)
You need to be a registered member to rate this.
3 Comments Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy

Leave a Reply

2 Comment threads
1 Thread replies
Most reacted comment
Hottest comment thread
3 Comment authors
VinayRajeev HathiAbdallah Ajlouni Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

newest oldest most voted
Notify of
Abdallah Ajlouni
Abdallah Ajlouni

Very clear. Thank you :)

Rajeev Hathi

Thanks Abdallah.


Simple and Very clear. Thank you Rajeev…