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