A template expression is a fragment of code that Angular evaluates using a component as its context. Its value supplies a data binding: it can become displayed text or be passed to a target that changes an element. Expressions can read component properties, call methods, and perform common JavaScript operations. section 11.2 section 11.2.2
Choose the binding form according to where the result belongs:
- Use `{{ username }}` within element content to insert a value alongside static text. An element can contain multiple interpolations. section 2.3.2 section 11.3.2
- Use `[ngClass]="classes()"` to evaluate an expression and pass its result to a directive. The square brackets matter: without them, a directive receives the quoted content as a literal string. section 11.2 section 11.2.3
Keep formatting in the template
In `[ngClass]="'text-white p-2 ' + classes()"`, the expression combines fixed CSS classes with a class read from a component signal. This is a small display-oriented operation. Put complex retrieval or processing in the component or model instead, where it is easier to compile and test. section 11.2.2 section 11.2
Template expressions also affect responsiveness. With conventional change detection, an event can cause Angular to reevaluate every expression, even when its inputs have not changed. Avoid expensive work in a getter used by a binding: its result may be calculated only to be discarded. Signals describe relationships between values so unaffected expressions need not be evaluated. Template compilation can catch a reference to a missing component property, but that does not make complex template logic easy to test. section 10.3.2 section 10.6 section 2.3.2 section 11.2.2
