Property Binding

An example of binding values to DOM properties using the [propertyName]="expression" syntax, covering src, alt, disabled, and value.

// app.component.ts

import { Component } from '@angular/core';

@Component({
  standalone: true,
  selector: 'app-root',
  template: `
    <img [src]="imageUrl" [alt]="imageAlt" />
    <button [disabled]="isDisabled">Submit</button>
    <input type="text" [value]="inputValue" />
  `,
})
export class AppComponent {
  imageUrl: string = 'https://example.com/photo.jpg';

  imageAlt: string = 'Sample image';

  isDisabled: boolean = true;

  inputValue: string = 'Initial value';
}

An example showing that the right-hand side of [propertyName]="expression" can be any TypeScript expression, including ternary operators, arithmetic, and method calls.

// app.component.ts

import { Component } from '@angular/core';

@Component({
  standalone: true,
  selector: 'app-root',
  template: `
    <span [title]="getLabel()">Hover over me</span>
    <a [href]="baseUrl + '/detail/' + productId">Product detail</a>
    <div [tabIndex]="isActive ? 0 : -1">Content</div>
  `,
})
export class AppComponent {
  baseUrl: string = 'https://example.com';

  productId: number = 42;

  isActive: boolean = true;

  getLabel(): string {
    return 'Show details for ID: ' + this.productId;
  }
}

An example of using attribute binding with [attr.attributeName] for HTML attributes that do not have corresponding DOM properties, such as aria-* and colspan.

// app.component.ts

import { Component } from '@angular/core';

@Component({
  standalone: true,
  selector: 'app-root',
  template: `
    <button [attr.aria-label]="ariaLabel" [attr.aria-expanded]="isOpen">
      Menu
    </button>
    <table>
      <tr>
        <th [attr.colspan]="colSpan">Heading</th>
      </tr>
    </table>
  `,
})
export class AppComponent {
  ariaLabel: string = 'Open navigation menu';

  isOpen: boolean = false;

  colSpan: number = 3;
}

An example of conditionally adding or removing CSS classes using [class.className]="boolean". For controlling multiple classes at once, the [ngClass] directive is also available.

// app.component.ts

import { Component } from '@angular/core';

@Component({
  standalone: true,
  selector: 'app-root',
  template: `
    <div [class.active]="isActive" [class.error]="hasError">
      Status display area
    </div>
    <p [class.highlight]="isHighlight">
      Highlighted text
    </p>
  `,
  styles: [`
    .active { border: 2px solid green; }
    .error { color: red; }
    .highlight { background-color: yellow; }
  `],
})
export class AppComponent {
  isActive: boolean = true;

  hasError: boolean = false;

  isHighlight: boolean = true;
}

An example of dynamically setting inline styles using [style.styleProperty]="value". For properties that require a unit, specify the unit after a dot, such as [style.width.px]="number".

// app.component.ts

import { Component } from '@angular/core';

@Component({
  standalone: true,
  selector: 'app-root',
  template: `
    <p [style.color]="textColor" [style.font-size.px]="fontSize">
      Style binding sample
    </p>
    <div style="background:#ddd; width:200px; height:20px;">
      <div [style.width.%]="progressValue" style="background:steelblue; height:100%;"></div>
    </div>
    <img src="sample.jpg" [style.opacity]="opacity" alt="Sample" />
  `,
})
export class AppComponent {
  textColor: string = 'steelblue';

  fontSize: number = 18;

  progressValue: number = 65;

  opacity: number = 0.8;
}

NG

// app.component.ts
// Using src="{{ imageUrl }}" sets a string attribute, which may trigger security warnings.
// Using disabled="{{ isDisabled }}" sets the string "false", which keeps the button disabled.

import { Component } from '@angular/core';

@Component({
  standalone: true,
  selector: 'app-root',
  template: `
    <img src="{{ imageUrl }}" alt="{{ imageAlt }}" />
    <button disabled="{{ isDisabled }}">OK</button>
  `,
})
export class AppComponent {
  imageUrl: string = 'https://example.com/photo.jpg';
  imageAlt: string = 'Sample image';
  isDisabled: boolean = false;
}

OK

// app.component.ts

import { Component } from '@angular/core';

@Component({
  standalone: true,
  selector: 'app-root',
  template: `
    <!-- Property binding -->
    <img [src]="imageUrl" [alt]="imageAlt" />
    <button [disabled]="isDisabled">OK</button>

    <!-- Use interpolation for text display -->
    <p>Image URL: {{ imageUrl }}</p>
  `,
})
export class AppComponent {
  imageUrl: string = 'https://example.com/photo.jpg';

  imageAlt: string = 'Sample image';

  isDisabled: boolean = false;
}

Property Binding ([propertyName]="expression") in Angular is the syntax for dynamically reflecting component data onto element properties in the HTML template. Beyond DOM properties like src, disabled, and value, it also handles HTML attributes via [attr.*], CSS classes via [class.*], and inline styles via [style.*].

The general rule is to use interpolation ({{ }}) for text content and property binding ([]) for setting values on element properties. Property binding is particularly suited for boolean properties like disabled and security-sensitive properties like src, where using interpolation would be inappropriate.

Property binding is the core syntax of data binding. For related binding concepts, see Data Binding and Interpolation.

Using disabled="{{ isDisabled }}" with interpolation sets the string "false" as the attribute value even when isDisabled is false. Since the HTML disabled attribute disables the element regardless of its value just by being present, the button will always be unclickable. Use property binding for boolean properties.

NG

// battle.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-battle',
  template: `
    <button disabled="{{ isDisabled }}">Attack</button>
  `,
  standalone: true,
})
export class BattleComponent {
  isDisabled: boolean = false;
}

OK

// battle.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-battle',
  template: `
    <button [disabled]="isDisabled">Attack</button>
  `,
  standalone: true,
})
export class BattleComponent {
  isDisabled: boolean = false;
}

Writing [colspan]="n" does not work because colspan does not exist as a DOM property. You need to use the attribute binding form [attr.colspan]="n" instead. On the other hand, src and disabled do exist as DOM properties, so you write them as [src] and [disabled].

NG

// team.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-team',
  template: `
    <table>
      <tr><th [colspan]="colSpan">Z Fighters Team</th></tr>
      <tr><td>Son Goku</td><td>Vegeta</td></tr>
    </table>
  `,
  standalone: true,
})
export class TeamComponent {
  colSpan: number = 2;
}

OK

// team.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-team',
  template: `
    <table>
      <tr><th [attr.colspan]="colSpan">Z Fighters Team</th></tr>
      <tr><td>Son Goku</td><td>Vegeta</td></tr>
    </table>
  `,
  standalone: true,
})
export class TeamComponent {
  colSpan: number = 2;
}