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

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.

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 ....

 

 

Leave a Reply

3 Comments on "AngularJs 2 Series: Custom Event Binding"

Notify of
avatar
Sort by:   newest | oldest | most voted
Abdallah Ajlouni
Guest

Very clear. Thank you :)

Rajeev Hathi
Guest

Thanks Abdallah.

Vinay
Guest

Simple and Very clear. Thank you Rajeev…

wpDiscuz