I’ve sucessfully used Angular mat-table to display data from database:
<table mat-table [dataSource]="UserDataSourceFilters" class="mat-elevation-z1 mt-5">
<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
<th mat-header-cell *matHeaderCellDef>{{ getUserColumnDisplayName(column) }}</th>
<td mat-cell *matCellDef="let emp">{{ emp[column] }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let emprow; columns: displayedColumns" (click)="onRowExchangeClicked(emprow)"
[ngClass]="{ 'clicked-row': true }"></tr>
</table>
<mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100, 200]"
aria-label="Select page">
</mat-paginator>
Now I want to add another column, which contains buttons. So in component.ts, I add a new column called actions:
displayedColumns: string[] = ['firstName', 'lastName', 'email', ..., 'type','actions'];
and in my html i added this container:
<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>
But when i run the project, I got this error: