Property and Attribute Binding

Property binding sets a DOM property to the value of a template expression. It is the primary way to make templates dynamic.

Basic Property Binding

@Component({
  selector: 'app-profile',
  template: `
    <img [src]="user.avatarUrl" [alt]="user.name">
    <input [value]="username" [disabled]="isReadOnly" [maxlength]="maxLen">
    <div [hidden]="isHidden">Content</div>
  `,
})
export class ProfileComponent {
  user = { name: 'Alice', avatarUrl: '/avatar.jpg' };
  username = 'alice';
  isReadOnly = false;
  maxLen = 20;
  isHidden = false;
}

Property Binding vs Interpolation

<!-- These produce the same result for strings -->
<p>{{ title }}</p>
<p [textContent]="title"></p>

<!-- But property binding works for non-strings -->
<input [disabled]="isDisabled">        <!-- boolean -->
<div [ngClass]="classes">            <!-- object -->
<child [config]="configObject">     <!-- object -->

Attribute Binding

Use attr. prefix when no matching DOM property exists:

<td [attr.colspan]="columnCount">Cell</td>
<button [attr.aria-label]="buttonLabel">Click</button>
<div [attr.data-id]="itemId">Item</td>
<progress [attr.max]="maxValue" [attr.value]="currentValue">

Why Attribute Binding Matters

DOM properties and HTML attributes are not the same:

• Attribute — the initial value in HTML
• Property — the current value in the DOM

<input type="text" value="initial">

// attribute stays 'initial'
input.getAttribute('value'); // 'initial'

// property changes with user input
input.value; // 'whatever the user typed'

For attributes like colspan, aria-label, and data-*, there is no corresponding DOM property, so you must use attribute binding.

Angular provides specialized binding syntax for dynamic classes and styles.

Class Binding

<!-- Toggle a single class -->
<div [class.active]="isActive">Content</div>
<div [class.disabled]="isDisabled">Content</div>

<!-- Object syntax: toggle multiple classes -->
<div [ngClass]="{
  'active': isActive,
  'disabled': isDisabled,
  'highlight': isHighlighted,
  'error': hasError
}">Content</div>

<!-- Array syntax: apply classes conditionally -->
<div [ngClass]="['base-class', isActive ? 'active' : 'inactive']">
  Content
</div>

Style Binding

<!-- Set a single style property -->
<div [style.width.px]="progress + '%'">Content</div>
<div [style.color]="textColor">Content</div>
<div [style.font-size.em]="fontSize">Content</div>

<!-- Object syntax: set multiple styles -->
<div [ngStyle]="{
  'width.px': width,
  'height.px': height,
  'background-color': bgColor,
  'font-weight': isBold ? 'bold' : 'normal'
}">Content</div>

Complete Example

@Component({
  selector: 'app-dashboard',
  template: `
    <div [ngClass]="{ 'is-loading': loading, 'has-error': hasError }">
      <h1 [style.color]="titleColor">{{ title }}</h1>
      <div [ngStyle]="{ 'opacity': loading ? 0.5 : 1 }">
        <p *ngFor="let item of items" [attr.data-id]="item.id">
          {{ item.name }} - {{ item.value | currency }}
        </p>
      </div>
    </div>
  `,
})
export class DashboardComponent {
  title = 'Dashboard';
  titleColor = '#333';
  loading = false;
  hasError = false;
  items = [
    { id: 1, name: 'Revenue', value: 50000 },
    { id: 2, name: 'Expenses', value: 30000 },
  ];
}