How to pass two parameters to EventEmitter in Angular 9 ? - GeeksforGeeks

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;      /* we will define the type of the     an object that will be emitted.*/      @Output() public data =         new EventEmitter<{name:string, age:number}>();    send_name_age()  {      /* we will wrap the parameters      to be sent inside the curly brackets.*/        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>         /* The data that is sent by the       child component will be        received in the */       /* Parent component as a parameter        for change_name_age method. */     <app-test (data) = "change_name_age($event)" >  </app-test>     `,    styleUrls: []})export class AppComponent {      /* Create a model of the type that is        emitted by the child component to        receive it.*/      public model = { name: "geek1", age: 24 }      change_name_age(data) {          /* Update the current model with           the value sent by the child            component. */        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.
AngularJS-Misc
Picked
AngularJS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Angular Libraries For Web Developers
Auth Guards in Angular 9/10/11
What is AOT and JIT Compiler in Angular ?
How to set focus on input field automatically on page load in AngularJS ?
How to bundle an Angular app for production?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript