Add icon as button in each row of angular material table

Question

I am using angular material version 9.2.4 I have a table in html. The table has been displayed properly. But I want to add an icon as button in each row of the table. The table datas are coming from a rest api while I want to use same icon(say Delete icon) in each row of the table.

<mat-table [dataSource]="employeeData" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="name">
  <mat-header-cell *matHeaderCellDef> NAME </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="phoneNumber">
  <mat-header-cell *matHeaderCellDef> PHONE NUMBER </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.phoneNumber}} </mat-cell>
</ng-container>

<!-- Weight Column -->
<ng-container matColumnDef="emailId">
  <mat-header-cell *matHeaderCellDef> EMAIL ID </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.emailId}} </mat-cell>
</ng-container>

<!-- Symbol Column -->
<ng-container matColumnDef="dateOfBirth">
  <mat-header-cell *matHeaderCellDef> DATE OF BIRTH </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.dateOfBirth }} </mat-cell>
</ng-container>

<!-- Delete Column -->
<ng-container matColumnDef="deleteEmployee">
  <mat-cell *matCellDef="let element">
    <!-- <button mat-icon-button aria-label="Example icon button with a vertical three dot icon"> -->
      <mat-icon>delete</mat-icon>
    <!-- </button> -->
  </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

I am not able to get the delete icon. the table looks like this

I want to display the delete icon after the column date of birth. What I am missing?

You need to include the deleteEmployee column in the displayedColumns array. The columns will be displayed in the same order as in the displayedColumns array. So make sure you place the deleteEmployee in the appropriate position. — Nikhil
matColumnDef="deleteEmployee" is only valid when "deleteEmployee" will be present in the backend response. But I dont have any such like that. — Greenbox
matColumnDef="deleteEmployee" is only valid when "deleteEmployee" will be present in the backend response. No, this is not correct. You can add any number of empty new columns. The only condition is they have to be present in the displayedColumns array. If you are getting this array from the backend then just add a new item to it. — Nikhil

ing.smendezm ing.smendezm · Accepted Answer · 2020-06-02T19:10:35

Add the matColumnDef 'deleteEmployee' to displayedColumns's Array in your ts file.

For Example:

displayedColumns: string[] = ['position', 'name', 'weight', 'symbol', 'deleteEmployee'];

and your html file

<!-- Delete Column -->
  <ng-container matColumnDef="deleteEmployee">
    <th mat-header-cell *matHeaderCellDef> Delete </th>
    <td mat-cell *matCellDef="let element">
       <button mat-icon-button color="primary" aria-label="Example icon button with a home icon">
        <mat-icon>delete</mat-icon>
      </button>
    </td>
  </ng-container>

Add icon as button in each row of angular material table

1 Answers