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:

javascript

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:

javascript

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:

javascript

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:
Before receiving data
Name and age in the parent component is updated after receiving it from child component.
After receiving data