I had a working code emitting an event like so.

@Output() actChange = new EventEmitter<string[]>();
private emitIds() { ... 
  this.actChange.emit(includedIds); 
}

It was successfully handling the event like this.

<app-child (actChange)="onActChange($event)">

onActChange(input: string[]) {
  console.log('input', input);
  ...
}

Then, I changed it by removing the indicator of acts ending up with this.

@Output() change = new EventEmitter<string[]>();
private emitIds() { ... 
  this.change.emit(includedIds); 
}

<app-child (change)="onChange($event)">

onChange(input: string[]) {
  console.log('input', input);
  ...
}

It still works as supposed to, with a single differece. The method is now invoked twice: once for the previously desired effect, then, once again, for the default event of type Event (the default change of something in the HTML).

I understand what happens and why. However, I have multiple ways to approach it and I’m not certain which to pick. I fear the unexpected, currently obscure, negative implications.

Option 1 is not to use overlapping names for the event.

@Output() actChange = new EventEmitter<string[]>();

Option 2 is to handle the default change by explictly guarding against it.

onChange(input: string[]) {
  console.log('input', input);
  if (input instanceof Event)
    return;
  ...
}

Option 3 would be to turn off the default event being fired (unclear how to, though).

I’ve googled it and read up on emitting events, suggested style etc. without finding any clear indication of reusing an event’s name nor how to deal with it. I’ve seen a suggestion to prefix but it wasn’t a canonical best-practice.

Which of the options above carry zero (or minimal) nagative implications? What other approach would minimize the risks in the future?