Property binding in Angular helps you set values for properties of HTML elements or directives. Use property binding to do things such as toggle button features, set paths programmatically, and share values between components.
See the live example for a working example containing the code snippets in this guide.
Property binding moves a value in one direction, from a component's property into a target element property.
For more information on listening for events, see Event binding.
To read a target element property or call one of its methods, see the API reference for ViewChild and ContentChild.
To bind to an element's property, enclose it in square brackets, [], which identifies the property as a target property.
A target property is the DOM property to which you want to assign a value.
To assign a value to a target property for the image element's src property, type the following code:
<img alt="item" [src]="itemImageUrl">
In most cases, the target name is the name of a property, even when it appears to be the name of an attribute.
In this example, src is the name of the <img> element property.
The brackets, [], cause Angular to evaluate the right-hand side of the assignment as a dynamic expression.
Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value.
To assign a string to a property, type the following code:
<app-item-detail childItem="parentItem"></app-item-detail>
Omitting the brackets renders the string parentItem, not the value of parentItem.
To bind the src property of an <img> element to a component's property, place src in square brackets followed by an equal sign and then the property.
Using the property itemImageUrl, type the following code:
<img alt="item" [src]="itemImageUrl">
Declare the itemImageUrl property in the class, in this case AppComponent.
itemImageUrl = '../assets/phone.svg';
colspan and colSpan
A common point of confusion is between the attribute, colspan, and the property, colSpan. Notice that these two names differ by only a single letter.
To use property binding using colSpan, type the following:
<!-- Notice the colSpan property is camel case --> <tr><td [colSpan]="1 + 1">Three-Four</td></tr>
To disable a button while the component's isUnchanged property is true, type the following:
<!-- Bind button disabled state to `isUnchanged` property --> <button type="button" [disabled]="isUnchanged">Disabled Button</button>
To set a property of a directive, type the following:
<p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p>
To set the model property of a custom component for parent and child components to communicate with each other, type the following:
<app-item-detail [childItem]="parentItem"></app-item-detail>
To use a Boolean value to disable a button's features, bind the disabled DOM attribute to a Boolean property in the class.
<!-- Bind button disabled state to `isUnchanged` property --> <button type="button" [disabled]="isUnchanged">Disabled Button</button>
Because the value of the property isUnchanged is true in the AppComponent, Angular disables the button.
isUnchanged = true;
© 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/guide/property-binding