Can't use any other variable name than $event for reception of the emitted number in Angular

Question

NB. The question is not how to make it work (since I can, as explained at the bottom). It's rather about why I can make it work this way and no other.

I've designed a component like this. It's a data row that can keep a bunch och data rows. Hence, in each such instance, we have both onRemoval (invoked when the user clicks on remove icon) as well as onRemove (invoked when the emitted even is heard).

@Output() remove: EventEmitter<number> = new EventEmitter<number>();
...
onRemoval() {
  console.log("being removed: " + this.id);
  this.remove.emit(this.id);
}
onRemove(id: number) {
  console.log("removing: " + id);
  if (!id)
    return;

  this.subRows.splice(id, 1);
}

I'm sure I'm missing something stupid but what puzzles me when I try to debug it is that the emitted value is the correct index, while the received value isn't. It's undefined.

The relevant part of the markup I've tried looks like this. I also tried with empty parantheses, as well as no parantheses.

<div *ngIf="unfolded">
  <app-data-row *ngFor="let subRow of subRows"
                (remove)="onRemove(id)"
                [config]="subRow"></app-data-row>
</div>

I've googled this but as far I could tell, I've followed the proper approach by using EventEmitter. Also, it seems that the setup works as far as that the event is emitted and received. It's just the id value that seems not to be set properly.

The only way to make it work is to call the variable precisely $event and nothing else. Is that me doing something dumb or is that the required syntax?! I mean, not even *$id$ helped...

Answer 1

In template, when connecting child's output to component's callback: $event is the name of the emitted value, and there's no way around that. After all: invoking the handler doesn't need to have the output as its sole argument. You could do, dunno,

<app-data-row *ngFor="let subRow of subRows" (remove)="onRemove(subRow.id)">

or

<app-data-row *ngFor="let subRow of subRows" (remove)="onRemove(subRow.id, $event)">

or

<app-data-row *ngFor="let subRow of subRows" (remove)="onRemove($event, subRow.id)">

and so on, and so forth. So, here in the template, $event is needed as the identifier of the actual output value.