In-depth Guides
Template Syntax

Property binding

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.

Understanding the flow of data

Property binding moves a value in one direction, from a component's property into a target element property.

To read a target element property or call one of its methods, see the API reference for ViewChild and ContentChild.

Binding to a property

HELPFUL: For information on listening for events, see Event binding.

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 string to a component's property (such as the childItem of the ItemDetailComponent), you use the same bracket assignment notation:

src/app/app.component.html

      
<div>
  <h1>Property Binding with Angular</h1>
  <h2>Binding the src property of an image:</h2>
  <img alt="item" [src]="itemImageUrl">
  <hr />
  <h2>Binding to the colSpan property</h2>
  <table border=1>
    <tr><td>Column 1</td><td>Column 2</td></tr>
    <!-- Notice the colSpan property is camel case -->
    <tr><td [colSpan]="2">Span 2 columns</td></tr>
  </table>
  <hr />
  <h2>Button disabled state bound to isUnchanged property:</h2>
  <!-- Bind button disabled state to `isUnchanged` property -->
  <button type="button" [disabled]="isUnchanged">Disabled Button</button>
  <hr />
  <h2>Binding to a property of a directive</h2>
  <p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p>
  <hr />
  <h2>Model property of a custom component:</h2>
  <app-item-detail [childItem]="parentItem"></app-item-detail>
  <app-item-detail childItem="parentItem"></app-item-detail>
  <h3>Pass objects:</h3>
  <app-item-list [items]="currentItems"></app-item-list>
  <hr />
  <h2>Property binding and interpolation</h2>
  <p><img alt="Interpolated item" src="{{ itemImageUrl }}"> is the <em>interpolated</em> image.</p>
  <p><img alt="Property Bound item" [src]="itemImageUrl"> is the <em>property bound</em> image.</p>
  <p><span>"{{ interpolationTitle }}" is the <em>interpolated</em> title.</span></p>
  <p>"<span [innerHTML]="propertyTitle"></span>" is the <em>property bound</em> title.</p>
  <hr />
  <h2>Malicious content</h2>
  <p><span>"{{ evilTitle }}" is the <em>interpolated</em> evil title.</span></p>
  <!--
  Angular generates a warning for the following line as it sanitizes them
  WARNING: sanitizing HTML stripped some content (see https://g.co/ng/security#xss).
 -->
  <p>"<span [innerHTML]="evilTitle"></span>" is the <em>property bound</em> evil title.</p>
</div>

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:

src/app.component.html

      
<div>
  <h1>Property Binding with Angular</h1>
  <h2>Binding the src property of an image:</h2>
  <img alt="item" [src]="itemImageUrl">
  <hr />
  <h2>Binding to the colSpan property</h2>
  <table border=1>
    <tr><td>Column 1</td><td>Column 2</td></tr>
    <!-- Notice the colSpan property is camel case -->
    <tr><td [colSpan]="2">Span 2 columns</td></tr>
  </table>
  <hr />
  <h2>Button disabled state bound to isUnchanged property:</h2>
  <!-- Bind button disabled state to `isUnchanged` property -->
  <button type="button" [disabled]="isUnchanged">Disabled Button</button>
  <hr />
  <h2>Binding to a property of a directive</h2>
  <p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p>
  <hr />
  <h2>Model property of a custom component:</h2>
  <app-item-detail [childItem]="parentItem"></app-item-detail>
  <app-item-detail childItem="parentItem"></app-item-detail>
  <h3>Pass objects:</h3>
  <app-item-list [items]="currentItems"></app-item-list>
  <hr />
  <h2>Property binding and interpolation</h2>
  <p><img alt="Interpolated item" src="{{ itemImageUrl }}"> is the <em>interpolated</em> image.</p>
  <p><img alt="Property Bound item" [src]="itemImageUrl"> is the <em>property bound</em> image.</p>
  <p><span>"{{ interpolationTitle }}" is the <em>interpolated</em> title.</span></p>
  <p>"<span [innerHTML]="propertyTitle"></span>" is the <em>property bound</em> title.</p>
  <hr />
  <h2>Malicious content</h2>
  <p><span>"{{ evilTitle }}" is the <em>interpolated</em> evil title.</span></p>
  <!--
  Angular generates a warning for the following line as it sanitizes them
  WARNING: sanitizing HTML stripped some content (see https://g.co/ng/security#xss).
 -->
  <p>"<span [innerHTML]="evilTitle"></span>" is the <em>property bound</em> evil title.</p>
</div>

Omitting the brackets renders the string parentItem, not the value of parentItem.

Setting an element property to a component property value

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:

src/app/app.component.html

      
<div>
  <h1>Property Binding with Angular</h1>
  <h2>Binding the src property of an image:</h2>
  <img alt="item" [src]="itemImageUrl">
  <hr />
  <h2>Binding to the colSpan property</h2>
  <table border=1>
    <tr><td>Column 1</td><td>Column 2</td></tr>
    <!-- Notice the colSpan property is camel case -->
    <tr><td [colSpan]="2">Span 2 columns</td></tr>
  </table>
  <hr />
  <h2>Button disabled state bound to isUnchanged property:</h2>
  <!-- Bind button disabled state to `isUnchanged` property -->
  <button type="button" [disabled]="isUnchanged">Disabled Button</button>
  <hr />
  <h2>Binding to a property of a directive</h2>
  <p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p>
  <hr />
  <h2>Model property of a custom component:</h2>
  <app-item-detail [childItem]="parentItem"></app-item-detail>
  <app-item-detail childItem="parentItem"></app-item-detail>
  <h3>Pass objects:</h3>
  <app-item-list [items]="currentItems"></app-item-list>
  <hr />
  <h2>Property binding and interpolation</h2>
  <p><img alt="Interpolated item" src="{{ itemImageUrl }}"> is the <em>interpolated</em> image.</p>
  <p><img alt="Property Bound item" [src]="itemImageUrl"> is the <em>property bound</em> image.</p>
  <p><span>"{{ interpolationTitle }}" is the <em>interpolated</em> title.</span></p>
  <p>"<span [innerHTML]="propertyTitle"></span>" is the <em>property bound</em> title.</p>
  <hr />
  <h2>Malicious content</h2>
  <p><span>"{{ evilTitle }}" is the <em>interpolated</em> evil title.</span></p>
  <!--
  Angular generates a warning for the following line as it sanitizes them
  WARNING: sanitizing HTML stripped some content (see https://g.co/ng/security#xss).
 -->
  <p>"<span [innerHTML]="evilTitle"></span>" is the <em>property bound</em> evil title.</p>
</div>

Declare the itemImageUrl property in the class, in this case AppComponent.

src/app/app.component.ts

      
import {Component} from '@angular/core';
import {NgClass} from '@angular/common';
import {ItemDetailComponent} from './item-detail.component';
import {ItemListComponent} from './item-list.component';
@Component({
  standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  imports: [ItemDetailComponent, ItemListComponent, NgClass],
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  itemImageUrl = '../assets/phone.svg';
  isUnchanged = true;
  classes = 'special';
  parentItem = 'lamp';
  currentItems = [
    {
      id: 21,
      name: 'phone',
    },
  ];
  interpolationTitle = 'Interpolation';
  propertyTitle = 'Property binding';
  evilTitle = 'Template <script>alert("evil never sleeps")</script> Syntax';
}

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:

src/app/app.component.html

      
<h1>Attribute, class, and style bindings</h1>
<h2>Attribute binding</h2>
<table border=1>
  <!--  expression calculates colspan=2 -->
  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
  <!-- ERROR: There is no `colspan` property to set!
    <tr><td colspan="{{ 1 + 1 }}">Three-Four</td></tr>
  -->
  <!-- Notice the colSpan property is camel case -->
  <tr><td [colSpan]="1 + 1">Three-Four</td></tr>
  <tr><td>Five</td><td>Six</td></tr>
</table>
<div>
  <!-- create and set an aria attribute for assistive technology -->
  <button type="button" [attr.aria-label]="actionName">{{ actionName }} with Aria</button>
</div>
<hr />
<h2>Styling precedence</h2>
<h3>Basic specificity</h3>
<!-- The `class.special` binding overrides any value for the `special` class in `classExpression`.  -->
<div [class.special]="isSpecial" [class]="classExpression">Some text.</div>
<!-- The `style.border` binding overrides any value for the `border` property in `styleExpression`.  -->
<div [style.border]="border" [style]="styleExpression">Some text.</div>
<h3>Source specificity</h3>
<!-- The `class.special` template binding overrides any host binding to the `special` class set by `dirWithClassBinding` or `comp-with-host-binding`.-->
<comp-with-host-binding [class.special]="isSpecial" dirWithClassBinding></comp-with-host-binding>
<!-- The `style.color` template binding overrides any host binding to the `color` property set by `dirWithStyleBinding` or `comp-with-host-binding`. -->
<div>
  <comp-with-host-binding [style.color]="color" dirWithStyleBinding></comp-with-host-binding>
</div>
<h3>Dynamic vs static</h3>
<!-- If `[class.special]` equals false, this value overrides the `class="special"` below -->
<div class="special" [class.special]="false">Some text.</div>
<!-- If `styleExpression` has a value for the `border` property, this value overrides the `style="border: dotted darkblue 3px"` below -->
<div style="border: dotted darkblue 3px" [style]="styleExpression">Some text.</div>
<div class="readability">
  <comp-with-host-binding dirWithHostBinding></comp-with-host-binding>
</div>
<app-my-input-with-attribute-decorator type="number"></app-my-input-with-attribute-decorator>

To disable a button while the component's isUnchanged property is true, type the following:

src/app/app.component.html

      
<div>
  <h1>Property Binding with Angular</h1>
  <h2>Binding the src property of an image:</h2>
  <img alt="item" [src]="itemImageUrl">
  <hr />
  <h2>Binding to the colSpan property</h2>
  <table border=1>
    <tr><td>Column 1</td><td>Column 2</td></tr>
    <!-- Notice the colSpan property is camel case -->
    <tr><td [colSpan]="2">Span 2 columns</td></tr>
  </table>
  <hr />
  <h2>Button disabled state bound to isUnchanged property:</h2>
  <!-- Bind button disabled state to `isUnchanged` property -->
  <button type="button" [disabled]="isUnchanged">Disabled Button</button>
  <hr />
  <h2>Binding to a property of a directive</h2>
  <p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p>
  <hr />
  <h2>Model property of a custom component:</h2>
  <app-item-detail [childItem]="parentItem"></app-item-detail>
  <app-item-detail childItem="parentItem"></app-item-detail>
  <h3>Pass objects:</h3>
  <app-item-list [items]="currentItems"></app-item-list>
  <hr />
  <h2>Property binding and interpolation</h2>
  <p><img alt="Interpolated item" src="{{ itemImageUrl }}"> is the <em>interpolated</em> image.</p>
  <p><img alt="Property Bound item" [src]="itemImageUrl"> is the <em>property bound</em> image.</p>
  <p><span>"{{ interpolationTitle }}" is the <em>interpolated</em> title.</span></p>
  <p>"<span [innerHTML]="propertyTitle"></span>" is the <em>property bound</em> title.</p>
  <hr />
  <h2>Malicious content</h2>
  <p><span>"{{ evilTitle }}" is the <em>interpolated</em> evil title.</span></p>
  <!--
  Angular generates a warning for the following line as it sanitizes them
  WARNING: sanitizing HTML stripped some content (see https://g.co/ng/security#xss).
 -->
  <p>"<span [innerHTML]="evilTitle"></span>" is the <em>property bound</em> evil title.</p>
</div>

To set a property of a directive, type the following:

src/app/app.component.html

      
<div>
  <h1>Property Binding with Angular</h1>
  <h2>Binding the src property of an image:</h2>
  <img alt="item" [src]="itemImageUrl">
  <hr />
  <h2>Binding to the colSpan property</h2>
  <table border=1>
    <tr><td>Column 1</td><td>Column 2</td></tr>
    <!-- Notice the colSpan property is camel case -->
    <tr><td [colSpan]="2">Span 2 columns</td></tr>
  </table>
  <hr />
  <h2>Button disabled state bound to isUnchanged property:</h2>
  <!-- Bind button disabled state to `isUnchanged` property -->
  <button type="button" [disabled]="isUnchanged">Disabled Button</button>
  <hr />
  <h2>Binding to a property of a directive</h2>
  <p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p>
  <hr />
  <h2>Model property of a custom component:</h2>
  <app-item-detail [childItem]="parentItem"></app-item-detail>
  <app-item-detail childItem="parentItem"></app-item-detail>
  <h3>Pass objects:</h3>
  <app-item-list [items]="currentItems"></app-item-list>
  <hr />
  <h2>Property binding and interpolation</h2>
  <p><img alt="Interpolated item" src="{{ itemImageUrl }}"> is the <em>interpolated</em> image.</p>
  <p><img alt="Property Bound item" [src]="itemImageUrl"> is the <em>property bound</em> image.</p>
  <p><span>"{{ interpolationTitle }}" is the <em>interpolated</em> title.</span></p>
  <p>"<span [innerHTML]="propertyTitle"></span>" is the <em>property bound</em> title.</p>
  <hr />
  <h2>Malicious content</h2>
  <p><span>"{{ evilTitle }}" is the <em>interpolated</em> evil title.</span></p>
  <!--
  Angular generates a warning for the following line as it sanitizes them
  WARNING: sanitizing HTML stripped some content (see https://g.co/ng/security#xss).
 -->
  <p>"<span [innerHTML]="evilTitle"></span>" is the <em>property bound</em> evil title.</p>
</div>

To set the model property of a custom component for parent and child components to communicate with each other, type the following:

src/app/app.component.html

      
<div>
  <h1>Property Binding with Angular</h1>
  <h2>Binding the src property of an image:</h2>
  <img alt="item" [src]="itemImageUrl">
  <hr />
  <h2>Binding to the colSpan property</h2>
  <table border=1>
    <tr><td>Column 1</td><td>Column 2</td></tr>
    <!-- Notice the colSpan property is camel case -->
    <tr><td [colSpan]="2">Span 2 columns</td></tr>
  </table>
  <hr />
  <h2>Button disabled state bound to isUnchanged property:</h2>
  <!-- Bind button disabled state to `isUnchanged` property -->
  <button type="button" [disabled]="isUnchanged">Disabled Button</button>
  <hr />
  <h2>Binding to a property of a directive</h2>
  <p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p>
  <hr />
  <h2>Model property of a custom component:</h2>
  <app-item-detail [childItem]="parentItem"></app-item-detail>
  <app-item-detail childItem="parentItem"></app-item-detail>
  <h3>Pass objects:</h3>
  <app-item-list [items]="currentItems"></app-item-list>
  <hr />
  <h2>Property binding and interpolation</h2>
  <p><img alt="Interpolated item" src="{{ itemImageUrl }}"> is the <em>interpolated</em> image.</p>
  <p><img alt="Property Bound item" [src]="itemImageUrl"> is the <em>property bound</em> image.</p>
  <p><span>"{{ interpolationTitle }}" is the <em>interpolated</em> title.</span></p>
  <p>"<span [innerHTML]="propertyTitle"></span>" is the <em>property bound</em> title.</p>
  <hr />
  <h2>Malicious content</h2>
  <p><span>"{{ evilTitle }}" is the <em>interpolated</em> evil title.</span></p>
  <!--
  Angular generates a warning for the following line as it sanitizes them
  WARNING: sanitizing HTML stripped some content (see https://g.co/ng/security#xss).
 -->
  <p>"<span [innerHTML]="evilTitle"></span>" is the <em>property bound</em> evil title.</p>
</div>

Toggling button features

To use a Boolean value to disable a button's features, bind the disabled DOM attribute to a Boolean property in the class.

src/app/app.component.html

      
<div>
  <h1>Property Binding with Angular</h1>
  <h2>Binding the src property of an image:</h2>
  <img alt="item" [src]="itemImageUrl">
  <hr />
  <h2>Binding to the colSpan property</h2>
  <table border=1>
    <tr><td>Column 1</td><td>Column 2</td></tr>
    <!-- Notice the colSpan property is camel case -->
    <tr><td [colSpan]="2">Span 2 columns</td></tr>
  </table>
  <hr />
  <h2>Button disabled state bound to isUnchanged property:</h2>
  <!-- Bind button disabled state to `isUnchanged` property -->
  <button type="button" [disabled]="isUnchanged">Disabled Button</button>
  <hr />
  <h2>Binding to a property of a directive</h2>
  <p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p>
  <hr />
  <h2>Model property of a custom component:</h2>
  <app-item-detail [childItem]="parentItem"></app-item-detail>
  <app-item-detail childItem="parentItem"></app-item-detail>
  <h3>Pass objects:</h3>
  <app-item-list [items]="currentItems"></app-item-list>
  <hr />
  <h2>Property binding and interpolation</h2>
  <p><img alt="Interpolated item" src="{{ itemImageUrl }}"> is the <em>interpolated</em> image.</p>
  <p><img alt="Property Bound item" [src]="itemImageUrl"> is the <em>property bound</em> image.</p>
  <p><span>"{{ interpolationTitle }}" is the <em>interpolated</em> title.</span></p>
  <p>"<span [innerHTML]="propertyTitle"></span>" is the <em>property bound</em> title.</p>
  <hr />
  <h2>Malicious content</h2>
  <p><span>"{{ evilTitle }}" is the <em>interpolated</em> evil title.</span></p>
  <!--
  Angular generates a warning for the following line as it sanitizes them
  WARNING: sanitizing HTML stripped some content (see https://g.co/ng/security#xss).
 -->
  <p>"<span [innerHTML]="evilTitle"></span>" is the <em>property bound</em> evil title.</p>
</div>

Because the value of the property isUnchanged is true in the AppComponent, Angular disables the button.

src/app/app.component.ts

      
import {Component} from '@angular/core';
import {NgClass} from '@angular/common';
import {ItemDetailComponent} from './item-detail.component';
import {ItemListComponent} from './item-list.component';
@Component({
  standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  imports: [ItemDetailComponent, ItemListComponent, NgClass],
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  itemImageUrl = '../assets/phone.svg';
  isUnchanged = true;
  classes = 'special';
  parentItem = 'lamp';
  currentItems = [
    {
      id: 21,
      name: 'phone',
    },
  ];
  interpolationTitle = 'Interpolation';
  propertyTitle = 'Property binding';
  evilTitle = 'Template <script>alert("evil never sleeps")</script> Syntax';
}

What's next