Use <mat-text-column> for a simple Angular Material table column that displays one data property without modification. The name attribute selects the property and identifies the column; the property name also becomes the header. section 28.2.2
Display product properties
<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> </table> These columns display each product's id, name, and category values directly. Configure the table's row templates separately so the columns appear. section 28.2.2
Choose a custom matColumnDef column instead when values need formatting, such as a currency pipe, or composition from multiple data-source properties. 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 a complete Angular Material product table that combines simple text columns with formatted and action columns. section 28.2.2
