Angular Custom Event Binding + EventEmitter Example
June 19, 2020
On this page we will provide Angular custom event binding and EventEmitter
example. Angular framework provides event binding using in-built event as well as custom event. Event binding is achieved using parenthesis () and on- keyword. When using parenthesis (), we need to write our event name inside it. When using on- keyword, on- is added as prefix with event name. Custom events are the EventEmitter
instances. To create a custom event we need to create an instance of EventEmitter
annotated by @Output()
. Then this instance calls emit()
method to emit payload which can be received by event object $event
. In our example we are taking a parent child component communication example. In this example to send data from parent to child component, property binding will be used and to get data in parent component from child component, custom event binding will be used. Now we will discuss complete example step-by-step.
Contents
Software Used
Find the software used in our demo.1. Angular 9.1.11
2. Node.js 12.5.0
3. NPM 6.9.0
Steps for Custom Event Binding & Component Property Binding with Diagram
Find the diagram for custom event binding and component property binding. Arrow in light blue color is showing flow of custom event binding and arrow in red color is showing flow of component property binding.
person.component.ts
to app.component.ts
and for component property binding red arrow direction is from app.component.ts
to person.component.ts
. Find the steps involved in custom event binding and component property binding.
1. In the above diagram we are performing parent child communication using custom event binding and component property binding.
app.component.ts
is behaving as parent and person.component.ts
is behaving as child. The child selector person-app
will be used to create a custom element in parent component. Component property binding and custom event binding will take place in person-app
element.
2. In
AppComponent
we are creating an object of Student
class as studentObj
. In PersonComponent
we are creating an input variable as student
of Student
class type. @Input
decorator is used to mark a variable as input variable.
3. In
app.component.html
we are performing component property binding between the objects studentObj
of AppComponent
and student
of PersonComponent
in person-app
element.
4. In
person.component.html
the object student
is providing its value to text box using element property binding.
5. When user changes values in text box then on
input
event the values of student
object is getting changed. Here input event binding is taking place. $event.target.value
returns current input value by user.
6. In component property binding if the object sent to child is being updated then the reference object in parent will also get updated because they are pointing to the same object. So when
student
object of PersonComponent
is getting updated then at the same time studentObj
of AppComponent
will also get updated. It means student
and studentObj
both objects are always in sync. In property binding it happens only in case of object of a class and not in case of primitive data type such string, number.
7. On click of update button,
update()
method of PersonComponent
will be called. Here click event binding is taking place.
8. The object
updateEmployee
of angular EventEmitter
class works as custom event binding name. @Output
decorator is used to mark a variable as output variable. EventEmitter
has emit()
method that emits the payload.
9. The execution of code
updateEmployee.emit()
will invoke custom event binding and will send employee
object to custom event binding. Custom event is taking place in app.component.html
. When updateEmployee
event fires then it calls saveData()
method of AppComponent
. $event
contains the payload sent by emit()
method that is employee
object.
10. In the output we are printing
studentObj
and fullName
of AppComponent
using interpolation in app.component.html
. Here studentObj
and student
object will keep same values even after student
object changes by user update in text box.
EventEmitter
EventEmitter
is a class in angular framework. It has emit()
method that emits custom events. We can use EventEmitter
in custom event binding. To achieve it first we need to import it in our component file as given below.
import {Component, EventEmitter, Input, Output} from '@angular/core';
@Output
decorator as follows.
@Output() updateEmployee = new EventEmitter<Employee>();
Employee
is our TypeScript class. @Output()
defines an output variable. updateEmployee
will be a custom event name. Using emit()
method of EventEmitter
class we emits Employee
object to parent component in custom event binding as follows.
this.updateEmployee.emit(this.employee);
emit()
method can be accessed using event object $event
.
Create Custom Event
Suppose we want to create a custom event named asupdateEmployee
. So first of all we need to instantiate an instance of EventEmitter
in the variable updateEmployee
as below.
@Output() updateEmployee = new EventEmitter<Employee>();
@Output
that declares it as output variable. Custom event binding is used in parent child component communication. Here we will send data from child component to parent component. To send data we need to use emit()
method as below.
this.updateEmployee.emit(this.employee);
updateEmployee
as custom event. Event binding can be done using parenthesis () or on- keyword. Find event binding using ().
<person-app (updateEmployee) ="saveData($event)" [student] ="studentObj"> </person-app>
updateEmployee
event binding.
<person-app on-updateEmployee ="saveData($event)" [student] ="studentObj"> </person-app>
[student] ="studentObj"
is working as a property binding to send data from parent component to child component.
Create a Sample Class
For our demo we are creating two sample classes using TypeScript as follows.student.ts
export class Student { constructor(public id: number, public fname: string, public lname: string) { } }
export class Employee { public fname: string; public lname: string; constructor() { } }
Student
class in our parent component and will send it to child component using component property binding. Then we will set data to Employee
class instance in child component and will send it to parent component using custom event binding.
Create Child Component with EventEmitter
Find child component file used in our example.person.component.ts
import {Component, EventEmitter, Input, Output} from '@angular/core'; import {Student} from './student'; import {Employee} from './employee'; @Component({ selector: 'person-app', templateUrl: './person.component.html' }) export class PersonComponent { @Input() student : Student; @Output() updateEmployee = new EventEmitter<Employee>(); employee = new Employee(); update() { this.employee.fname = this.student.fname; this.employee.lname = this.student.lname; this.updateEmployee.emit(this.employee); } }
@Input(): Defines input variable in component communication. It is used to communicate from parent to child component using property binding.
@Output(): Defines output variable in component communication. It is used to communicate from child to parent component using custom event binding.
In our component file we have created a method
update()
that will call emit()
method. update()
method is being used in our HTML template as given below.
person.component.html
<div> <b>Id: {{student.id}} </b> <br/> <input [value]="student.fname" (input)="student.fname=$event.target.value" /> <br/> <input [value]="student.lname" (input)="student.lname=$event.target.value" /> <br/> <br/> <button (click)="update()">Update</button> </div>
input
event binding to fetch current value entered by user and assigning it back to student instance. To access the current values entered by user we use $event.target.value
. On the click of button, update()
method will be called that is using click
event binding.
Create Parent Component with Custom Event Binding
Now we will create parent component that will use custom event binding. Find the component.app.component.ts
import {Component} from '@angular/core'; import {Student} from './student'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { title = 'Update Person'; fullName = ''; studentObj = new Student(100, 'Mahesh', 'Sharma'); saveData(emp) { this.fullName = emp.fname + ' ' + emp.lname ; } }
Student
class. Method saveData()
will be called in custom event binding. Find the HTML template used in our parent component.
app.component.html
<h3>{{title}}</h3> <person-app (updateEmployee) ="saveData($event)" [student] ="studentObj"> </person-app> <p>{{studentObj.fname + ' '+ studentObj.lname}} </p> <p>{{fullName}}</p>
updateEmployee
declared in child component using EventEmitter
will work as an event that is custom event. The event will be executed when the below line of code will execute.
this.updateEmployee.emit(this.employee);
student
in our HTML template binds the value to input variable in child component.
Create Module
app.module.tsimport {NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {AppComponent} from './app.component'; import {PersonComponent} from './person.component'; @NgModule({ imports: [BrowserModule], declarations: [AppComponent, PersonComponent], bootstrap: [AppComponent] }) export class AppModule { }
Run Application
To run the application, find the steps.1. Download source code using download link given below on this page.
2. Use downloaded src in your Angular CLI application. To install Angular CLI, find the link.
3. Run ng serve using command prompt.
4. Access the URL http://localhost:4200
Find the print screen of the output.

When we change first name and last name in text box then by
input
event the student
object gets changed and because of component property binding it is the same object reference of studentObj
that will also get changed.
On click of update button
update
method of child component is called and hence emit()
method will execute that will generate updateEmployee
event in parent component and that will call saveData()
method because of custom event binding.
References
Angular Template syntaxAngular EventEmitter