Angular 7 - How to find element's attribute value in a component

Question

I have a component and i have the following elements in component's html and need the element's id on clicking it. Example: on clicking

element with id "l1", i should receive l1 inside onclick.

<div class="col-md-6 col-xl-6 col-sm-6">
    <ul>
      <li id = "l1">name1</li>
      <li id = "l2">name2</li>
      <li id = "l3">name3</li>
      <li id = "l4">name4</li>
    </ul>
</div>

I am trying to read id of each

element inside onClick event using @Viewchild in the class but no value is coming in console.log();

 @ViewChild('li', {read: ViewContainerRef}) showAllData;

 @HostListener("click") onClick(){
      console.log( $(this.showAllData.nativeElement).attr('id'));
 }

Answer 1

Try like this . Following code will log the li tag's id in the console each time user clicks on the li tag. Hope this is what you are looking for.

@HostListener("click" , ['$event.target']) onClick(li) {
    console.log(li.id);
}