The matHeaderCellDef directive marks an Angular Material table template element as the definition of a column's header-cell contents. It is typically written with concise syntax as *matHeaderCellDef on a th element that also has mat-header-cell. section 28.2.2 section 2.5
Defining a column header
<ng-container matColumnDef="task"> <th mat-header-cell *matHeaderCellDef>Task</th> <td mat-cell *matCellDef="let item">{{ item.task }}</td> </ng-container> Here, matColumnDef groups the header and body templates for one column. The literal text inside the th becomes the visible header, while matCellDef supplies each row's content. section 2.5 section 28.2.2
The directive defines the header template; mat-header-cell supplies the matching Angular Material appearance. The column still needs to be named in a header-row template before it appears in the table. section 28.2.2
Use the directive with these related pieces:
- Place it on a th element inside an ng-container with matColumnDef. section 28.2.2
- Keep the asterisk: *matHeaderCellDef is required by the shown template syntax. section 2.5
- Add the column name to the array used by matHeaderRowDef. section 28.2.2
Listing 28.8. Changing the table in the table.component.html file in the src/app/core folder
<table mat-table [dataSource]="Products()">
<mat-text-column name="id"></mat-text-column>
<mat-text-column name="name"></mat-text-column>
<mat-text-column name="category"></mat-text-column>
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef>Price</th>
<td mat-cell *matCellDef="let item">
{{item.price | currency:"USD"}}
</td>
</ng-container>
<ng-container matColumnDef="buttons">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<button mat-flat-button color="accent"
(click)="deleteProduct(item.id)">
Delete
</button>
<button mat-flat-button color="warn"
[routerLink]="['/form', 'edit', item.id]">
Edit
</button>
</ng-container>
<tr mat-header-row *matHeaderRowDef="colsAndRows"></tr>
<tr mat-row *matRowDef="let row; columns: colsAndRows"></tr>
</table>
<div class="p-2 text-center">
<button mat-flat-button color="primary" routerLink="/form/create"
[disabled]="isServer">
Create New Product
</button>
</div>
Inspect the complete Angular Material table template, including header definitions, formatted cells, action columns, and row configuration. section 28.2.2
