An input property lets a directive or component receive a value from a template binding. It replaces static attribute reading with expressions that Angular evaluates and updates as application state changes. section 14.3.2 section 16.5
Create and use an input property in three steps:
- Bind the template attribute with square brackets, as in [pa-attr]="expression". Without brackets, Angular passes the expression as raw text. section 14.3.2
- Declare a receiving property with @Input("pa-attr"). The decorator maps the template attribute to a differently named class property such as bgClass. section 14.3.2
- Use the received value in directive or component behavior. ngOnInit runs after initial input values arrive, while ngOnChanges responds to changes. section 14.3.2
Conditional row styling
A product table can bind expressions to a custom pa-attr directive: [pa-attr]="products().length < 6 ? 'table-success' : 'table-warning'" selects a row class; [pa-attr]="item.category == 'Soccer' ? 'table-info' : null" conditionally styles a category cell; and [pa-attr]="'table-info'" supplies a fixed expression value. The directive receives the result through @Input("pa-attr") bgClass and applies the class in ngOnInit. section 14.3.2
Listing 14.10. Using expressions in the template.html file in the src/app folder
...
<tbody>
<tr *ngFor="let item of products(); let i = index"
[pa-attr]="products().length < 6
? 'table-success' : 'table-warning'">
<td>{{i + 1}}</td>
<td>{{item.name}}</td>
<td [pa-attr]="item.category == 'Soccer' ? 'table-info' : null">
{{item.category}}
</td>
<td [pa-attr]="'table-info'">{{item.price}}</td>
</tr>
</tbody>
...
Inspect the complete table binding example to compare state-dependent, conditional, and fixed input expressions. section 14.3.2
Inputs also coordinate components. A custom button receives themeColor="primary" and uses the value to choose a CSS class. Unit tests can set an input through a host test component, access the child with ViewChild, and verify both component state and rendered bindings. section 28.3.1 section 29.4.6
