EventEmitter in Angular

Hello everywhere, in this article we will see the basic use case of @Ouput and EventEmitter in Angular 8. In order to notify or pass some information to a parent component about any event in its child components we use the Output decorator along with the EventEmitter to raise a custom event.

The child component in this case becomes a publisher of the event while the parent component subscribes to it. Let us create a simple app with two components parent & child and handle the keyup event raised on the child component and pass on the data to the parent.

child.component.html

<div class="containter m-5 p-5">
    <div class="row">
        <div class="col-md-6">
            <input type="text" placeholder="FirstName" class="form-control" name="Name" #name (keyup)="onKeyPressed(name.value)">
        </div>
    </div>
</div>

Here we have a simple text box and a method named onKeyPressed to handle the keyup event on it. This function will take in the current text of textbox as a parameter.

child.component.ts

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
 @Output() keyPressOnChild = new EventEmitter();
  constructor() { }
  ngOnInit() {
  }
  onKeyPressed(value)
  {
    this.keyPressOnChild.emit(value);
  }
}

• We need to first import Output and EventEmitter from @angular/core
• Then we create a new EventEmitter object named keyPressOnChild and decorate it with @Output

 @Output() keyPressOnChild = new EventEmitter();

• Then in the logic for keyPressedEvent we use the emit property of keyPressOnChild to publish the event and pass on the required parameter.

Also Read: Upload Files and Images in Angular

• So, basically an Event named keyPressOnChild is now published by the child component and the parent can subscribe.

parent.component.html

<h2 class="m-4">Hello {{dataFromChild}} from Parent Component</h2>
<app-child (keyPressOnChild)="handlerOnParent($event)"></app-child>

• While adding the selector for the child component, the parent can subscribe to its custom event by providing a event handler method (similar to default events like submit, keyup etc.)

parent.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
dataFromChild:string;
  constructor() { }
  ngOnInit() {
  }
  handlerOnParent(event)
  {
    this.dataFromChild = event;
    //Do any other prorcesing here
  }
}

• Here we will create a variable and assign the value passed from the child component to it.
• We then just display this value on screen through the parent component html file

That’s it!! We have implemented @output and EventEmitters to fulfill one of the most common requirement of an angular app, i.e. component communication.