Interpolation and Property Binding

Interpolation and property binding are the two fundamental ways to display dynamic data in Angular templates.

Interpolation with {{ }}

Interpolation evaluates a template expression and converts it to a string for display.

@Component({
  selector: 'app-greeting',
  template: `
    <h1>Hello, {{ name }}!</h1>
    <p>You have {{ messages.length }} messages.</p>
    <p>Next: {{ messages[0]?.title }}</p>
  `,
})
export class GreetingComponent {
  name = 'Alice';
  messages = [{ title: 'Welcome' }, { title: 'Reminder' }];
}

What You Can Do Inside {{ }}

@Component({
  selector: 'app-demo',
  template: `
    <p>{{ firstName + ' ' + lastName }}</p>
    <p>{{ price * quantity }}</p>
    <p>{{ isLoggedIn ? 'Welcome back' : 'Please log in' }}</p>
    <p>{{ formatDate(today) }}</p>
    <p>{{ user?.address?.city }}</p>
    <p>{{ nickname ?? 'Anonymous' }}</p>
  `,
})
export class DemoComponent {
  firstName = 'Alice';
  lastName = 'Smith';
  price = 9.99;
  quantity = 3;
  isLoggedIn = true;
  today = new Date();
  user: any = null;
  nickname: string | null = null;

  formatDate(date: Date): string {
    return date.toLocaleDateString();
  }
}

What You Cannot Do Inside {{ }}

<!-- NOT allowed: assignments -->
<p>{{ count = 5 }}</p>

<!-- NOT allowed: declarations -->
<p>{{ const x = 10 }}</p>

<!-- NOT allowed: new keyword -->
<p>{{ new Date() }}</p>

<!-- NOT allowed: chaining statements with semicolons -->
<p>{{ count++; count }}</p>

Property Binding with [ ]

Property binding sets a DOM property (not an attribute) to the value of a template expression.

@Component({
  selector: 'app-profile',
  template: `
    <img [src]="user.avatarUrl" [alt]="user.name">
    <input [value]="username" [disabled]="isReadOnly">
    <div [class.active]="isActive" [style.width.px]="progress">
      Content
    </div>
  `,
})
export class ProfileComponent {
  user = { name: 'Alice', avatarUrl: '/avatar.jpg' };
  username = 'alice';
  isReadOnly = false;
  isActive = true;
  progress = 75;
}

Interpolation vs Property Binding

These are equivalent:

<img src="{{ imageUrl }}">
<img [src]="imageUrl">

But property binding is preferred because:

• It works for non-string values (objects, arrays, booleans)
• It is more explicit about intent
• It avoids unnecessary string conversion

Beyond basic property binding, Angular provides specialized binding syntax for attributes, classes, and styles.

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</div>

Class Binding

<!-- Single class toggle -->
<div [class.active]="isActive">Content</div>

<!-- Multiple classes with object syntax -->
<div [ngClass]="{ active: isActive, disabled: isDisabled, highlight: isHighlighted }">
  Content
</div>

<!-- Array syntax -->
<div [ngClass]="['class-a', 'class-b', conditionalClass]">Content</div>

Style Binding

<!-- Single style property -->
<div [style.width.px]="progress">Content</div>

<!-- Multiple styles with object syntax -->
<div [ngStyle]="{ 'font-size.px': fontSize, 'color': textColor, 'font-weight': fontWeight }">
  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 },
  ];
}