The @Input decorator marks a directive or component property as receiving a value from a template binding. Pass an attribute name to alias the property, or omit it when both names match. section 14.3.2
Use input properties with these rules:
- Write square brackets around the attribute when binding an expression, such as [pa-attr]="item.category == 'Soccer' ? 'table-info' : null". Without brackets, Angular passes the expression as raw text. section 14.3.2
- Use @Input("pa-attr") bgClass to map the pa-attr attribute to the bgClass property. Use @Input() myVal when the property and attribute share a name. section 14.3.2
- Treat inputs as optional by default and provide a fallback when a value may be omitted. section 14.3.4
- Configure @Input({ required: true, alias: "fg-class" }) when every directive use must provide a value; Angular reports omissions while processing the saved template. section 14.3.4
Directive input with an alias
@Input("pa-attr") bgClass: string | null = ""; ngOnInit() { this.element.nativeElement.classList .add(this.bgClass || "table-success", "fw-bold"); } Applied as [pa-attr]="'table-info'", the binding supplies the evaluated value to bgClass. Angular sets the input after constructing the directive, so initialization that depends on it belongs in ngOnInit rather than the constructor. 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 a complete template showing conditional expressions, null values, and literal strings supplied through [pa-attr] bindings. section 14.3.2
