A property binding uses the result of a template expression to set a property of the DOM object representing its host element. Write the property name in square brackets: [value]="products()[1].name" sets an input element’s value from a product name. This is a one-way binding: the expression supplies the value, and the target identifies what Angular changes. section 11.3.1 section 11.2
The browser creates a DOM object for each HTML element and uses HTML attributes to establish initial property values. A property binding changes a property on that object. Check the DOM property name rather than assuming it matches an HTML attribute: some names differ, and some properties have no corresponding attribute. If a binding target names a directive instead, Angular uses the directive rather than a property binding. section 11.3.1 section 11.2.1
Table 11.4. The Angular property bindings
|
Name
|
Description
|
|
[property]
|
This is the standard property binding, which is used to set a property on the JavaScript object that represents the host element in the Document Object Model (DOM), as described in the “Using the standard property and attribute bindings” section.
|
|
[attr.name]
|
This is the attribute binding, which is used to set the value of attributes on the host HTML element for which there are no DOM properties, as described in the “Using the attribute binding” section.
|
|
[class.name]
|
This is the special class property binding, which is used to configure class membership of the host element, as described in the “Using the class bindings” section.
|
|
[style.name]
|
This is the special style property binding, which is used to configure style settings of the host element, as described in the “Using the style bindings” section.
|
Compare the four target forms: a DOM property, an HTML attribute without a corresponding DOM property, an individual class, and an individual style. section 11.2.1
Set an input value
In a component template, <input class="form-control" [value]="products()[1].name" /> reads the products signal, selects the second product, and assigns its name to the input element’s value property. The expression runs in the component’s context; the brackets mark the one-way binding. section 11.3.1 section 11.2
Choose the target according to how much of the element’s appearance needs to change:
- [class]="getClasses(0)" replaces all existing classes, so the expression must return every required class name, separated by spaces. [class.bg-info]="condition" controls one class while preserving other memberships. Use ngClass for a class map. section 11.4.1
- [style.fontSize]="fontSizeWithUnits" sets one style with units in the value; [style.fontSize.px]="fontSizeWithoutUnits" puts the units in the target. Use separate bindings or ngStyle for multiple styles rather than binding the DOM style object as a whole. section 11.4.2
A property binding alone does not send user edits back to the component. Pair [value] with an input event binding to update component state; the changed state can then update other inputs and displayed content. For forms, ngModel combines the property and event sides into a two-way binding. In Angular 16, ngModel does not work directly with signals, so signal-backed values need a regular property or a getter and setter. section 13.3 section 13.3.1
