Notion behind Event Emitter in Angular2

While creating application in angular we require data to be flow from one end to other, so in order to build the communication between components methodology is pre-defined in angular. To establish a communication between parent to child components or from child to parent components we require event bindings. Data flows into our components via property bindings and flows out of your components through event bindings. 

Event Emitter is a class in angular framework:-

export declare class EventEmitter<T> extends Subject<T> {
    __isAsync: boolean;
    constructor(isAsync?: boolean);
    emit(value?: T): void;
    subscribe(generatorOrNext?: any, error?: any, complete?: any): any;
}

We can pass a boolean to Event Emitter in order to identify whether we need to send data synchrounsly or asynchorunsly as we can see in above example. 

Intially we need to import into our component and then initialize it either @input and @output decorator.

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

   @Output() updateEmployee = new EventEmitter<Employee>(); 

In above example employee is our class and updateEmployee will be a custom event name. @Output decorator is used to send data from child to parent component . Using emit () method of event emitter we can send the data from one end  to other.

this.updateEmployee.emit(this.employee); 

The object which is emitted by a  emit() method can be accessed using $event . To establish a custom event binding for suppose, we have two sample classes :-

export class Student {
   constructor(public id: number, public fname: string, public lname: string) { 
   }
} 

export class Employee {
   public fname: string;
   public lname: string;
   constructor() { 
   }
}

We will create the instance of student class in our parent component and will send it to child component using component property binding. Then we will set the data to Employee class instance in child component and will send it to parent component using custom even binding.

@Input , it is used to communicate from parent to child component and @Outuput , it is used to communicate from child to parent component.

import {Component, EventEmitter, Input, Output} from '@angular/core';
import {Student}  from './student';
import {Employee} from './employee';
@Component({
    selector: 'person-app',
    templateUrl: 'app/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);
    }   
}

When the user clicks the button in the parent component , as in above example , when custom updateEmployee event is dispatched using EventEmitter. Event Emitter is basically an object which listens for something to happen and emits when the event is triggered.  and we are getting the event in parent component and getting it print in child component. So we can access the data bind from child component to parent component using @Output.

So , in order to communicate we have to define the instance class and transfer the data by using emit() method.