"Edit / Delete" button for each row & header column is 'Action' in the md-table component
You are on the right track, you just need to add an actions
item to displayedColumns
list;
displayedColumns = ["username","email","userFirstName" ... ,"actions"];
and:
<ng-container cdkColumnDef="actions"> <md-header-cell > Actions </md-header-cell> <md-cell *cdkCellDef="let row" > <button md-raised-button >Edit</button> </md-cell></ng-container>
For those looking for 6 and above
In your .ts
displayedColumns = ["username","email","userFirstName" ... ,"actions"];
and in your html
<ng-container matColumnDef="action"> <th mat-header-cell *matHeaderCellDef> Action </th> <td mat-cell *matCellDef="let element"> <button mat-raised-button >Edit</button> </td></ng-container>
<ng-container matColumnDef="actions"> <mat-header-cell *matHeaderCellDef>Actions </mat-header-cell> <mat-cell *matCellDef="let row"> <button mat-icon-button matTooltip="Click to Edit" class="iconbutton" color="primary"> <mat-icon aria-label="Edit">edit</mat-icon> </button> <button mat-icon-button matTooltip="Click to Delete" class="iconbutton" color="warn"> <mat-icon aria-label="Delete">delete</mat-icon> </button> </mat-cell></ng-container>