An Angular component template is an HTML-based view definition stored separately from the component’s TypeScript class. Angular compiles the template and evaluates its directives using the class properties and methods. section 18.4 section 18.6
Use template syntax to connect markup with component data and behavior:
- Write interpolation with double curly braces, such as {{ product.name }} or {{ product.price.toFixed(2) }}, to insert expression results. section 18.4
- Use square brackets for one-way binding, as in [class]="getBtnClass(cat)", to calculate an attribute value. section 18.4.1
- Use event binding, such as (click)="handleAddToCart()", to invoke component methods or emit notifications. section 18.4
- Use structural directives such as *ngFor to generate an element for each value in a collection. section 18.4.1
Composing a product list
A parent template combines components through custom elements: <header [order]="dataSource.order" (submit)="handleSubmit()"></header> and <product-item *ngFor="let p of products" [product]="p" (addToCart)="handleAdd($event)"></product-item>. Inputs provide values, while outputs notify the parent about user actions. section 18.4.3
Listing 18.20 The contents of the productList.component.html file in the src/app folder
<header [order]="dataSource.order" (submit)="handleSubmit()"></header>
<div class="container-fluid">
<div class="row">
<div class="col-3 p-2">
<category-list [selected]="selectedCategory"
[categories]="categories"
(selectCategory)="handleCategorySelect($event)">
</category-list>
</div>
<div class="col-9 p-2">
<product-item *ngFor="let p of products" [product]="p"
(addToCart)="handleAdd($event)"></product-item>
</div>
</div>
</div>
Inspect the complete product-list template to see component composition, iteration, property binding, and event binding together. section 18.4.3
Keep complex decisions in helper methods such as getBtnClass rather than placing complicated expressions in markup. Templates are compiled for browser execution, so TypeScript features are unavailable inside them. section 18.4.1 section 18.6
