Data binding connects an Angular template to data and logic supplied by its component. A binding contains an expression that Angular evaluates to produce dynamic HTML content. In the one-way bindings described here, values flow from the component into the rendered page. section 11.0 section 11.5
Choose a binding for the part of the element that must change:
- Use `{{ expression }}` to insert a value into an element’s text, such as `{{ count }}` in a product-count message. section 9.6.2 section 11.5
- Use a property or attribute binding to configure an element. For example, `[dataSource]="items"` supplies items to an Angular Material table. section 2.5 section 11.0
- Use class and style bindings when an element’s classes or individual styles depend on application data; `ngClass` and `ngStyle` provide other ways to set them. section 11.0 section 11.5
Bind a component value
A component getter can expose `count`, while its template says `There are {{ count }} products in the model`. When Angular processes the template, it evaluates `count` and creates the displayed HTML using the resulting value. The same pattern works for values prepared from a data model, such as a calculated total. section 9.6.2 section 10.2
Listing 5.16. The contents of the store.component.html file in the src/app/store folder
<div class="container-fluid">
<div class="row">
<div class="bg-dark text-white p-2">
<span class="navbar-brand ml-2">SPORTS STORE</span>
</div>
</div>
<div class="row text-white">
<div class="col-3 bg-info p-2">
{{categories().length}} Categories
</div>
<div class="col-9 bg-success p-2">
{{products().length}} Products
</div>
</div>
</div>
The store template calls `categories()` and `products()` inside interpolation bindings to display the lengths of component-provided signals. section 5.4.1
Keep binding expressions simple rather than burying logic that cannot readily be tested or reused. A binding has a host element, a target, and an expression. Template expressions are checked during compilation: a reference to a nonexistent component property produces an error. Bindings also take work to evaluate when an Angular page loads, which matters on slower devices. section 11.0 section 11.5 section 2.3.2 section 1.1
