How pass 2 parameters to EventEmitter in Angular?

AngularEventemitter

Angular Problem Overview


I have in my component an EventEmitter but I can't compile it because it throws the error:

> Supplied parameters do not match any signature of call target

My component:

@Output() addModel = new EventEmitter<any>();

saveModel($event, make, name) {
  this.addModel.emit(make, name);
}

If I delete one of the parameters in this.addModel.emit() it works but is it possible to pass 2 parameters to EventEmitter and how?

Angular Solutions


Solution 1 - Angular

If you look at the EventEmitter emit method @ angular.io, it can only take a single parameter of type T

> emit(value?: T)

Since only a single parameter is allowed, consider passing it as an object in emit method.

In the snippet below, make & name variables are holding their respective values:

this.addModel.emit({make: make, name: name});
//shorthand is below
this.addModel.emit({make, name});

Solution 2 - Angular

Another option to strongly type it is as follows:

@Output addModel = new EventEmitter<{make: string, name: string}>();

you can then emit it like @Pankaj-Parkar shows

this.addModel.emit({make, name});
or
this.addModel.emit({make: 'honda', name: 'civic'});

You now have strong typing instead of using object or any.

Solution 3 - Angular

I fixed it by making

EventEmitter<object>();

Then I was able to pass an object such as:

this.MyOutputVariable.emit({ name: 'jack', age: '12' });

And it worked.

Solution 4 - Angular

I know this is an old Question for me I would create an interface and send it as an object where I can have my code more organized

 export interface addModelArgs{
      make:string,
      name:string
    }
@Output() addModel = new EventEmitter<addModelArgs>();

and call it as following

    this.addModel.emit({make: 'honda', name: 'civic'});
or 
    let savParamters:addModelArgs={make: 'honda', name: 'civic'};

    this.addModel.emit(savParamters);

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionLorenzoBertiView Question on Stackoverflow
Solution 1 - AngularPankaj ParkarView Answer on Stackoverflow
Solution 2 - AngularAndy Danger GagneView Answer on Stackoverflow
Solution 3 - AngularAdham AmiinView Answer on Stackoverflow
Solution 4 - Angularkhaled DehiaView Answer on Stackoverflow