liveBook · Manning

Row template

As explained in Pro Angular 16

A row template is a table template that specifies which configured column names are rendered in a row.

A row template is an array of configured column names that determines which columns Angular Material renders in a table row. Columns remain hidden until a row template selects them. section 28.2.2

Selecting columns for header and body rows

Define the selected columns in the component, then bind the same array to the header and body row directives: <code>colsAndRows = ["id", "name", "category", "price", "buttons"]</code>; <code>&lt;tr mat-header-row *matHeaderRowDef="colsAndRows"&gt;&lt;/tr&gt;</code>; <code>&lt;tr mat-row *matRowDef="let row; columns: colsAndRows"&gt;&lt;/tr&gt;</code>. The names must match the configured column definitions, including custom columns such as price and buttons.

How Pro Angular 16 covers it

How deep it goes
Explains the column-name array and its row-directive bindings, but does not detail Angular Material table internals.
Examples
Uses id, name, category, price, and buttons columns selected through a component property and row directives.
What it assumes
Assumes Angular template bindings and directive syntax while relying on implicit row values to connect data with column content.
What you can do after
Apply it via Angular Material table directives to select the columns displayed in header and body rows.
How it connects
Connects row templates to Angular Material tables, column definitions, header rows, body rows, and data sources.
Cover of Pro Angular 16
liveBookmanning.com
Read Pro Angular 16 on liveBook Get the book at manning.com

This explainer was generated by Manning's knowledge graph from the text of Pro Angular 16. The section links point to the parts of the book it draws on.