When using Jquery, a single event listener was added to the <ul> element in order to listen for events on the current li by utilizing event bubbling.
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
Now, looking to achieve the same functionality in angular:
1) I am attempting the following approach:
I can only retrieve the selected list element using $event.target, but I am unable to access the data bound to the list items.
<ul (click)="onListClick($event)">
<li *ngFor="let data of [1, 2, 3, 4]"></li>
</ul>
2) Alternatively, I found that I can access the data bound to the list item within the click listener when applying it directly to the li elements:
<ul>
<li (click)="onListClick(data)" *ngFor="let data of [1, 2, 3, 4]"></li>
</ul>
Note: The main objective is to reduce the number of event listeners, hence binding the event to the <ul> tag instead of individual <li> elements. However, we still need to find a way to pass the data from the clicked <li> element to the <ul> click listener function.