How to put buttons in Angular mat-table?

Question

I've sucessfully used Angular mat-table to display data from database:

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
</mat-form-field>

<mat-table #table [dataSource]="dataSource" matSort>

  <ng-container matColumnDef="iccid">
    <mat-header-cell *matHeaderCellDef mat-sort-header> ICCID </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.iccid}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="euicc">
    <mat-header-cell *matHeaderCellDef mat-sort-header> EUICC </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.euicc}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="msisdn">
    <mat-header-cell *matHeaderCellDef mat-sort-header> MSISDN </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.msisdn}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="status_paket_data">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Status paket data </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.status_paket_data}}  </mat-cell>
  </ng-container>

  <ng-container matColumnDef="status_sms">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Status SMS </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.status_sms}}  </mat-cell>
  </ng-container>

<ng-container matColumnDef="active_profile">
  <mat-header-cell *matHeaderCellDef mat-sort-header> Active profile </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.active_profile}}  </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click) = "rowClicked(row)" ></mat-row>
</mat-table>

<mat-paginator [length]="5" [pageSize]="3" [pageSizeOptions]="[5, 10, 25]">
</mat-paginator>

Now I want to add another column, which contains buttons. So in app.component.ts, I add a new column called actions:

 displayedColumns = ['iccid', 'euicc', 'msisdn', 'status_paket_data', 'status_sms', 'active_profile', 'actions'];

And in app.component.html, I add this before displayedColumns:

<ng-container matColumnDef="actions">
  <mat-header-cell > Actions </mat-header-cell>
  <mat-cell *matCellDef="let row" >
       <button mat-button >Edit</button>
  </mat-cell>
</ng-container>

When the page is refreshed, I get this:

AppComponent.html:5 ERROR TypeError: Cannot read property 'template' of undefined at MatHeaderRowDef.push../node_modules/@angular/cdk/esm5/table.es5.js.CdkHeaderRowDef.extractCellTemplate (table.es5.js:280) at table.es5.js:1452 at Function.from () at MatTable.push../node_modules/@angular/cdk/esm5/table.es5.js.CdkTable._getCellTemplates (table.es5.js:1447) at MatTable.push../node_modules/@angular/cdk/esm5/table.es5.js.CdkTable._renderRow (table.es5.js:1395) at table.es5.js:1289 at Array.forEach () at MatTable.push../node_modules/@angular/cdk/esm5/table.es5.js.CdkTable._forceRenderHeaderRows (table.es5.js:1289)

How to properly add column with buttons in it?

Answer 1

Add the cell column definition matHeaderCellDef for the mat header cell

<ng-container matColumnDef="actions">
  <mat-header-cell  *matHeaderCellDef > Actions </mat-header-cell>
  <mat-cell *matCellDef="let row" >
       <button mat-button >Edit</button>
  </mat-cell>
</ng-container>

Answer 2

This answer helped me a lot. however, I just want to add that in the matColumnDef="actions" you refer to the column actions, which should also be included in the component displayedColumns variable.

displayedColumns = ['id','name','price'...etc., 'actions']

Answer 3

I would like to thank Sachila Ranawaka for his answer. For those using Material 11+, I would only suggest adding the th and td elements, as they render better looking results (border, padding, elevation, etc).

<ng-container matColumnDef="actions">
  <th mat-header-cell  *matHeaderCellDef > Actions </th>
  <td mat-cell *matCellDef="let row" >
    <button mat-button >Edit</button>
  </td>
</ng-container>

Answer 4

Correct Design Complete Working Answer

I tried all the answers here, some doesn't work and others work but not properly.

This one got me the results I needed.

<ng-container matColumnDef="actions">
  <th mat-header-cell *matHeaderCellDef> Actions </th>
  <td mat-cell *matCellDef>  </td>
</ng-container>

Add this code where the other definitions of matColumnDef.

The magic souse here is the *matCellDef in td

Also add to the column array the "actions" column like this:

displayedColumns = ['column1', 'column2', 'actions']