Add a html button to each row dynamically in angular material table - html

Question

I have done a code to generate a datatable based on dynamic rows and columns. I need to add a html button in the last column of each row for edit. How to do that. Below is the code
<div class="example-table-container" >
<table mat-table [dataSource]="data" class="example-table"
matSort matSortActive="created" matSortDisableClear matSortDirection="desc">
<ng-container *ngFor="let disCol of this.columnHeading | keyvalue; let colIndex = index" matColumnDef="{{disCol.key}}">
<th mat-header-cell *matHeaderCellDef><b>{{disCol.value}}</b></th>
<td mat-cell *matCellDef="let element">{{element[disCol.key]}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
When i insert html code in value the button is not appearing but only html code is appearing like this
<button>Edit</button>
I have tried the bypassSecurityTrustHtml also. It gives the error safeValue must use [property]=binding:

Answer 1

Angular material table provides a stickyend property with some css.
Normally we add an extra th with stickyend to solve that.
Below is an example of that..
<ng-container matColumnDef="star" stickyEnd>
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<mat-icon>more_vert</mat-icon>
</td>
</ng-container>
https://stackblitz.com/angular/nneoarrlekb?file=src%2Fapp%2Ftable-sticky-columns-example.html

Answer 2

<table mat-table [dataSource]="data" class="example-table"
matSort matSortActive="created" matSortDisableClear matSortDirection="desc">
<ng-container *ngFor="let disCol of this.columnHeading | keyvalue; let colIndex = index" matColumnDef="{{disCol.key}}">
<th mat-header-cell *matHeaderCellDef ><b >{{disCol.value}}</b></th>
<td mat-cell *matCellDef="let element" [innerHtml]="element[disCol.key]"></td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
I have done this using the innerhtml

Answer 3

try to add this
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let row">
<button mat-icon-button (click)="onEdit(row)"><mat-icon>launch</mat-icon></button>
<button mat-icon-button color="warn" (click)="onDelete(row.$key)"><mat-icon>delete_outline</mat-icon></button>
</mat-cell>
</ng-container>
do not forget to add this column in displayedColumns
displayedColumns: string[] = ['fullName', 'email', 'mobile', 'city', 'departmentName', 'actions'];

Answer 4

I was in a similar predicament to you and this is what I came up with.
Firstly, trying to add the html button tag as a value is not a solution and akin to html injection.
Given an example set of columns,
const columnHeadings = ['position', 'firstName', 'lastName', 'actions'];
const displayNames = ['No.', 'First Name', 'Last Name', 'Actions'];
we may dynamically populate our table. What I have done here is presented different content for my one column, 'actions', based on a condition that is triggered by the desired column.
<table mat-table [dataSource]="data" class="example-table">
<ng-container matColumnDef="{{disCol}}" *ngFor="let disCol of columnHeadings; index as i">
<th mat-header-cell *matHeaderCellDef> {{displayNames[i]}} </th>
<td mat-cell *matCellDef="let element">
<div *ngIf="column!=='actions'"> {{element[disCol]}} </div>
<div *ngIf="column==='actions'">
<button mat-icon-button>
<mat-icon>edit</mat-icon>
</button>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnHeadings"></tr>
<tr mat-row *matRowDef="let element; columns: columnHeadings;" class="element-row"></tr>
</table>
By no means have a done a very elegant way to execute this but it is one that works; even if it is somewhat of a "hack" solution.