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...

You can read it [here](https://angular.io/guide/template-syntax#event-and-event-handling-statements) in the documentation — Poul Kruijt, Apr 07 '19 at 18:16

score 1 · Accepted Answer · answered Apr 07 '19 at 18:11

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.

Now that you say this way, it makes perfect sense. I guess this was the kind of day when one gets unlucky while trying to think, hehe. — Konrad Viltersten, Apr 07 '19 at 18:22

score 1 · Answer 2 · answered Apr 07 '19 at 18:19

$event is the event itself when using @Output event emitter of component/directive that emits the value and it is captured by the callback function with $event variable.

When you define event listener with parenthesis such as

(remove)="onRemove($event)"

you actually pass a method reference. You don't need a local variable defined before. And Angular itself replaces the $event value with the emitted one. But if you do it like

(remove)="onRemove(id)"

it considers id to be a local variable such as you define in *ngFor="let id of idList"

In short, it is the only way to capture the emitted value when using output event emitter of a component/directive.

You can have a look at this official docs: https://angular.io/guide/user-input

And also this SO thread: What exactly $event object do in Angular 2?

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

2 Answers2