How to emit more than one method in a .html file

Question

I have two methods that emit some parameters.

@Output() parametersEmitter = new EventEmitter<FilterParams>();

emitSearch() {
  const parameters = <any>{};
  this.parametersEmitter.emit(parameters);
}

emitExport() {
  const parameters = <any>{};
  this.parametersEmitter.emit(parameters);
}

Then I want to emit those parameters to the Rest API methods. This is what I want to do, but it is not correct to use two times the (parametersEmitter). Any idea of how can I use different methods with the parameterEmitter?

<div>
  <app-search (parametersEmitter)="searchMessages($event)" (parametersEmitter)="exportMessages($event)"></app-search>
</div>

searchMessages() and exportMessages() are methods that send the parameters to Backend

score 3 · Accepted Answer · answered Mar 31 '20 at 08:08

You can simply have 2 event emitters.

Child Component

@Output()
search = new EventEmitter()
@Output()
export = new EventEmitter()

Parent Component

<div>
  <app-search 
    (search)="searchMessages($event)" 
    (export)="exportMessages($event)"
  ></app-search>
</div>

You can actually have as many EventEmitters as you like, see the docs for more details:

https://angular.io/guide/component-interaction#parent-listens-for-child-event

score 2 · Answer 2 · answered Mar 31 '20 at 08:03

You should handle parametersEmitter events with a single function.

component.html

<div>
  <app-search (parametersEmitter)="onParametersEmitted($event)"></app-search>
</div>

component.ts

onParametersEmitted(parameters) {
  this.searchMessages(parameters);
  this.exportMessages(parameters);
}

If you require any more complex logic, your single function can be responsible for orchestrating it.

score 1 · Answer 3 · answered Mar 31 '20 at 08:04

You can use like that

emitSearch() {
    const data = {
    isSearch:true;
    };
    this.parametersEmitter.emit(parameters);
  }

 emitExport() {
    const data = {
    isExport:true;
    };
    this.parametersEmitter.emit(parameters);
  }

And your html side

<app-search (parametersEmitter)="perofrmOperation($event)"></app-search>

Component

perofrmOperation(data) {
if(data.isSearch){
// Call search API
}
if(data.isExport){
// Call export API
}
}

score 1 · Answer 4 · answered Mar 31 '20 at 08:11

There are multiple ways to achieve your requirement. One way is to create multiple event emitters. On the other hand, you could assign any number of callbacks to the event handler. Try the following

<app-search (parametersEmitter)="searchMessages($event); exportMessages($event)"></app-search>

How to emit more than one method in a .html file

4 Answers4