So im working on expandable MatRow tables ,but my issue is I need to add a button to each row with a click element and open a modal on click ,But its not working
<table mat-table [dataSource]="dataSource" multiTemplateDataRows>
<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
<th mat-header-cell *matHeaderCellDef > {{column}} </th>
<td mat-cell *matCellDef="let element" (click)="getTableElement(element)" [innerHtml]="element[column] | safeHtml"></td>
</ng-container>
<\table>
I am displaying data based on inner html and using pipe to sanitize and allow displaying of HTML elements ,But my on click function is not working
What I have tried so far
Event binding to the button
elementRef.nativeElement.querySelector('a').addEventListener('click',alert(1))
Hostlistener to get clicked id
@HostListener('document:click',['$event.target']) onDocumentClick(event:any){
alert(event.id)
}
But nothing works ,can I know what I am doing wrong ? any help would be greatly appreciated .
Thanks for the answers but had a mistake in my code .corrected it