Use Of Event Emitter

Event Emitter

Event-emitter is imported from the “@anguar/core” package. It is used in directives and components to emit custom events synchronously or asynchronously and register handlers for those events by subscribing to an instance.

So to use this feature we will create 2 components,

UserList Component (Child)
User Component(Parent)

In User Component we will have one textbox and 2 buttons, which are Add and Remove. On click of these two buttons, we will display the username in ListComponent which is a child component.

We will integrate List and User component in AppComponent and event will get fired by using event emitter.

(AppComponent.Html) In App Component, we are integrating UserList and UserComponent. We will display data into UserList Component page which will be used by template variable "ListValue" which is input for UserList Component page and that will get updated whenever any event will be fired in UserComponent.

<header></header>
<div>
<hello></hello>
<user-list [listValue] = "listData"></user-list>
<user-component (userData) = "AddData($event)"></user-component>
</div>

(AppComponent.ts)

AddData() is an function which will be triggered automatically whenever any event will be performed into UserComponent Page.

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
listData = [];
AddData(arr:any[]){
this.listData=arr;
}
}

(UserListCompoenent.Html)

UserList Component will display the data. Here ListValue is an input variable which is getting updated on click of Add and Remove button in UserComponent.

<div *ngFor="let data of listValue">
<span class="d-block p-2 bg-dark text-white margin10px comment">{{data}}</span>
</div>

(UserListComponent.ts)

import { Component,Input } from '@angular/core';
@Component({
selector: 'user-list',
templateUrl: './list.component.html',
styleUrls: [ '../app/app.component.css' ]
})
export class ListComponent {
@Input() listValue = [];
}

(UserComponent.Html)

<html>
<head>
</head>
<div>
<div class="input-group input-group-lg">
<input type="text" class="form-control margin10px comment" placeholder="Type UserName..." aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" #userName>
<button type="button" class="btn btn-success margin10px" (click)="AddMessage(userName)">add</button>
<button type="button" class="btn btn-success margin10px" (click)="RemoveMessage(userName)">remove</button>
</div>
</div>
</html>

(UserComponent.ts)

UserData name should be same as given in appcomponent .html page. UserData is an output event. Here the event emitter will play their role.

this.userData.next(this.listUser);

Next function will call AddUser function of appcomponent.ts page with the use of next function of event emitter.

import { Component,Output,EventEmitter } from '@angular/core';
@Component({
selector: 'user-component',
templateUrl: './user.component.html',
})
export class UserComponent {
@Output() userData = new EventEmitter();
listUser:any=[];
AddMessage(userName:HTMLInputElement){
this.listUser.push(userName.value);
this.userData.next(this.listUser);
}
RemoveMessage(userName:HTMLInputElement)
{
var index = this.listUser.indexOf(userName.value);
if (index !== -1) {
this.listUser.splice(index, 1);
}
this.userData.next(this.listUser);
}
}

Now we will register User and List component into (App.Module.ts) file,

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ListComponent } from '../list/list.component'
import { UserComponent } from '../user/user.component';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent ,ListComponent,UserComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }

That's all, the download link is avaliable for a Demo.