How to get the id of clicked mat-button instead of mat-button wrapper?

Question

I am using material design in my Angular7 project.There is a click event on a mat-button.

  itemclick(event: Event) {
 //to know the id of clicked element,ie button
 let elementId: string = (event.target as Element).id;
 console.log(elementId);
 }

here is the HTML

<button mat-button color="primary" id="test1" (click)="itemclick($event)" style="outline: none">Property1</button>

But I dont get the id always, because the (event.target) keeps changing randomly between mat-button(case in which id=test1) and mat-button-wrapper(case in which id is null).

How to solve this? Thanks in advance.

Answer 1

Replace your function with:

HTML:

<button mat-button #test color="primary" id="test1" (click)="itemclick(test)" style="outline: none">Property1</button>

TS:

itemclick(event) {
   console.log(event._elementRef.nativeElement.id)
}

StackBlitz