How to pass two parameters to EventEmitter in Angular 9 ?
Last Updated :
05 Jun, 2020
In Angular, we can transmit the data in both directions i.e. inside: to the child component and outside: to the parent component. For sending data to the child component, we use property binding and for the latter we use EventEmitter.
In this article, we will talk about the EventEmitter directive and how can we pass 2 parameters in it.
Let’s take a look at EventEmitter source code:
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;
}
|
It is clearly visible that in the emit method only one parameter of type T can be passed, so we cannot pass two parameters directly into it. Instead, we can make an object containing all the parameters and pass the object as a single entity.
Approach:
- EventEmitter allows us to emit any type of object, so we will take advantage of it.
- For passing the parameters, we will wrap all the parameters inside the curly brackets (this will combine them as a single object) and pass it to the emit method.
- To receive the parameters in the parent component, we will make a similar type of object and update its value with that of the received object.
Syntax:
@Output() sendobject = new EventEmitter<any>();
this.sendobject.emit({stringval, numval, ...});
Example: We will create two properties in child component and receive them in parent component by using EventEmitter.
Code for the child component:
import {
Component, OnInit, EventEmitter, Input, Output
} from '@angular/core' ;
@Component({
selector: 'app-test' ,
template: `
<h2>child component<h2>
<h4>{{name}}</h4>
<h4>{{age}}</h4>
<button (click) = "send_name_age()" >send data</button>
`,
styles: []
})
export class TestComponent {
constructor() { }
public name = "geek2" ;
public age = 22;
@Output() public data =
new EventEmitter<{name:string, age:number}>();
send_name_age()
{
this .data.emit({name: this .name, age: this .age});
}
ngOnInit(): void {
}
}
|
Code for the parent component:
import { Component } from '@angular/core' ;
@Component({
selector: 'app-root' ,
template: `
<div style= "text-align: center;" >
<h1>parent component</h1>
<h2>{{model.name}}</h2>
<h2>{{model.age}}</h2>
</div>
<app-test (data) = "change_name_age($event)" >
</app-test>
`,
styleUrls: []
})
export class AppComponent {
public model = { name: "geek1" , age: 24 }
change_name_age(data) {
this .model = data;
}
}
|
Output:
Successfully received both age and name from child component in the parent component.
- Before receiving name and age:
- Name and age in the parent component is updated after receiving it from child component.
Share your thoughts in the comments
Please Login to comment...