The matColumnDef attribute names a custom Angular Material table column. Apply it to an ng-container holding the header and data-cell templates for that column. section 28.2.2
Use matColumnDef when a column needs more than direct property display:
- Place th mat-header-cell and td mat-cell elements inside the container. section 28.2.2
- Use matHeaderCellDef and matCellDef to define the header and cell content. section 28.2.2
- Format or compose values with an implicit row value, such as formatting item.price with the currency pipe. section 28.2.2
Custom price column
A price column can format each row value instead of displaying it unchanged: <ng-container matColumnDef="price"> <th mat-header-cell *matHeaderCellDef>Price</th> <td mat-cell *matCellDef="let item">{{item.price | currency:"USD"}}</td> </ng-container>
