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);
}

Answer 2

Yes, you can, but it depends on the strategy. You could do it by JQuery or using the DOM accessors. In my team we use JQuery but we don`t search the entire DOM to find the elements, instead, we use a class called ElementRef:

import { ElementRef } from '@angular/core';
...
constructor(private elementRef : ElementRef) {
}

ngAfterViewInit() {
    jQuery(this.elementRef.nativeElement).find('selectModal').on('click', () => {
    //do something here
    });
}

The ElementRef class is a reference for the component itself in the DOM. So we're able to filter the search to this component.