What is the best way to bind events to array elements when outputting via ngFor in Angular 2+?

Question

Angular

Now the binding is done like this

<div *ngFor="let item of array">
   <div (click)="someFunc(item)">{{item.name}}</div>
</div>

or so

<div *ngFor="let item of array"  (click)="someFunc(item)">
   <div>{{item.name}}</div>
</div>

The problem is that if we have a long array, or if they are arrays of arrays, then we get quite a lot of listeners (in my case, several thousand).
Is there any way to optimize this by putting a single click on the parent (as is done in pure js)?

Answer 1

So nothing prevents to hang up on the parent in the same way . event.target will have a bottom element. (click)="onClick($event)"