Bind click event by class in Angular 2

Question

Let's say I have the following template:

<ul>
 <li id="1" class="selectModal">First</li>
 <li id="2" class="selectModal">Second</li>
 <li id="2" class="selectModal">Third</li>
</ul>

How can I bind a click event by class in TypeScript, so when a li element is clicked I can get the element and query the ID or any other attribute of the clicked element?

Answer 1

There are many ways to do that. Straight forward solution:

<ul (click)="onClick($event.target)">
 <li id="1" class="selectModal">First</li>
 <li id="2" class="selectModal">Second</li>
 <li id="2" class="selectModal">Third</li>
</ul>

onClick(e:HTMLElement){
    console.log(e.id, e.className);
}