A one-way data binding carries a value from an Angular component into a template. Angular evaluates an expression in the component’s context, then uses the result to change an HTML element’s content or appearance. This is the component-to-interface direction of data flow; it does not, by itself, handle user input. section 11.2
Listing 11.3. Appling a data binding in the template.html file in the src/app folder
<div [ngClass]="classes()" >
Hello, World.
</div>
The div is the host element. Angular evaluates classes() and passes its result to ngClass, which sets the element’s CSS class membership. section 11.2
Read a bracketed binding as four parts:
- The host element is the HTML element being changed. section 11.2
- Square brackets tell Angular to evaluate the expression; the target, such as ngClass, determines what the result changes. section 11.2
- The expression can read properties and methods from the template’s component, including a signal value such as classes(). section 11.2
When the brackets are missing
Compare [ngClass]="'text-white p-2 ' + classes()" with ngClass="'text-white p-2 ' + classes()". In the second form, Angular passes the quoted content as a literal rather than evaluating it. If the styling looks wrong, check the brackets and inspect the resulting class attribute in the browser. section 11.2.3
Keep one-way binding expressions idempotent: repeated evaluation must not change application state. An assignment in a binding produces a parser error; reading a property that removes a product from an array also causes trouble. Use expressions to produce display values, not to consume or modify data. section 12.3.1
For user interaction, an event binding runs in the opposite direction, from an element into the application. A mouseover handler can update a selected-product signal; interpolation can then display the selection, while a one-way class binding highlights its table row. Two-way binding is a separate option used most often in forms. section 13.2 section 11.2
