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

Answer 1

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