"Edit / Delete" button for each row & header column is 'Action' in the md-table component "Edit / Delete" button for each row & header column is 'Action' in the md-table component angular angular

"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>