The matCellDef directive marks a td element as the template for an Angular Material table's data cells. Angular evaluates its expression for each item in the table data source, exposing the current item through a template variable such as item. section 2.5 section 28.2.2
Displaying a task property
Place matCellDef inside a column definition and bind the desired property: <td mat-cell *matCellDef="let item">{{ item.task }}</td>. For a counter rather than a data property, capture the supplied index: <td mat-cell *matCellDef="let i = index">{{ i + 1 }}</td>. The asterisk is significant because it applies Angular's concise template syntax.
The directive supports more than direct property display: its expression can format a value or combine multiple data-source properties. A price cell, for example, uses a currency pipe while retaining the current item as its context. section 28.2.2
Use matCellDef with the surrounding table configuration:
- Pair the data-cell template with a header-cell template using matHeaderCellDef. section 2.5
- Include the column name in the header and body row templates; columns are not displayed until selected there. section 28.2.2
