0

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

BHL
  • 125
  • 2
  • 11
  • Take a look here https://stackoverflow.com/questions/48164039/how-to-add-click-event-on-mat-row-in-angular-material-table – dt170 Jan 27 '22 at 17:07

1 Answers1

2

Why not add a click event directly to the button in the HTML like:

<button (click)="doSomething()"></button>

You can read more about Angular Event Binding here: https://angular.io/guide/event-binding

Raffael
  • 249
  • 2
  • 7