How to pass two parameters to EventEmitter in Angular 9 ?

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:

filter_none

edit
close

play_arrow

link
brightness_4
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;
}

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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 {
  }
  
}

chevron_right


Code for the parent component:

filter_none

edit
close

play_arrow

link
brightness_4
code

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;
    }
}

chevron_right


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.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.