String interpolation binding is Angular template syntax that evaluates an expression and inserts its result into an element’s text content. It uses paired double curly brackets, {{ and }}, within ordinary HTML content. section 5.4.1 section 11.3.2
Use interpolation when dynamic values must appear among static text:
- Place an expression between {{ and }}; Angular evaluates it and combines its result with the surrounding HTML content. section 11.3.2
- Include multiple interpolation bindings in one element when several dynamic values contribute to its displayed text. section 11.3.2
- Prefer interpolation over manually concatenating literal text and expressions in a textContent property binding when readability matters. section 11.3.2
Displaying store totals
A store template can display repository-backed signal values directly: {{categories().length}} Categories and {{products().length}} Products. The parentheses invoke the signals before length is read; omitting them can leave the displayed values at zero. section 5.4.1 section 5.4.3
Embedding a product name
Instead of binding [textContent] to a concatenated expression such as 'Name: ' + products()[1].name, write Name: {{ products()[1].name }} inside the div. Both approaches produce the same text, but interpolation is less error-prone for mixed static and dynamic content. section 11.3.2
Listing 11.8. Using the string interpolation binding in the template.html file in the src/app folder
<div [ngClass]="'text-white p-2 ' + classes()">
Name: {{ products()[1].name}}
</div>
<div class="form-group m-2">
<label>Name:</label>
<input class="form-control" [value]="products()[1].name" />
</div>
Inspect the focused template comparison between a textContent property binding and the equivalent string interpolation binding. section 11.3.2
