Attribute binding is Angular template syntax for assigning a data-bound value to an element attribute. Use square brackets with the attribute target; Angular evaluates the expression and applies its result. section 2.5 section 11.3.3
Use the attr. prefix when an HTML attribute has no equivalent property in the DOM API. The common example is colspan, which controls how many table columns a cell spans. section 11.3.3
Binding a table cell's colspan
A template can bind the cell span to a value returned by the component: <td [attr.colspan]="count()">{{ products()[1].name }}</td>. If count() returns five, Angular sets colspan to five and the cell spans five columns. section 11.3.3
Binding a component data source
Angular Material uses attribute binding to provide table data: <table mat-table [dataSource]="items">. The items property exposes the to-do objects displayed by the table. section 2.5
Keep these distinctions in mind:
- Use [attr.name] when the target is specifically an HTML attribute. section 11.3.3
- Do not confuse attribute binding with property binding; Angular supports different bindings for different situations. section 2.5 section 11.3.3
- Preserve required asterisks on structural template attributes such as *matHeaderCellDef; square brackets, curly braces, and asterisks have different roles. section 2.5
