How to get event.target.id on fa-icon (angular)?

Question

Somehow fa-icon 'swallows' event.target.id. I have the following in my component.html:

 <div id="STATUS_OK" class="unit dropdown-item" (click)="filterStatus($event)" [ngClass]="{ 'unit-selected' : STATUS_OK == true }">
     <input id="STATUS_OK" type="checkbox" name="unit" [(ngModel)]="STATUS_OK">          
     <fa-icon   id="STATUS_OK"  icon="check-circle" [ngStyle]="{'color':'#417505'}"></fa-icon>
     OK
</div>

I want to get event.target.id in my comopnent.ts file:

filterStatus(ev) {

      console.log(ev.target.id) // works for div and input, but doesn't work for fa-icon

  }

So my question is how to get event.target.id if I click on the icon.(Everything works perfectly if I click inside the div but outside the icon)

Answer 1

The reason id is not present is probably that fa-icon has an child HTML node that is the actual target of the click event.

Also note, that only one element on page is allowed to have unique id value.

Correct solution would be to pass the STATUS_OK as the event callback parameter.

(click)="filterStatus($event, 'STATUS_OK')"

<div class="unit dropdown-item" (click)="filterStatus($event, 'STATUS_OK')" [ngClass]="{ 'unit-selected' : STATUS_OK == true }">
     <input type="checkbox" name="unit" [(ngModel)]="STATUS_OK">          
     <fa-icon icon="check-circle" [ngStyle]="{'color':'#417505'}"></fa-icon>
     OK
</div>

filterStatus(ev, status) {
    console.log(status)    
}