🔗 Templates and Data Binding

The Four Kinds of Binding

A template is HTML plus Angular's binding syntax. Data binding is the machinery that keeps the component's data and the DOM in sync, so you never write manual document.querySelector updates. There are four flavors, distinguished entirely by their punctuation:

Interpolation

Interpolation is the simplest binding: double curly braces drop a value into the text of the page. With signals, you call the signal to read it.

<h1>{{ title() }}</h1>
<p>Hello, {{ name() }}</p>

<!-- Expressions are allowed -->
<p>1 + 1 = {{ 1 + 1 }}</p>
<p>{{ hero().firstName + ' ' + hero().lastName }}</p>
<p>Status: {{ isActive() ? 'Active' : 'Inactive' }}</p>

<!-- Method calls work too (keep them cheap) -->
<p>{{ getGreeting() }}</p>

Angular evaluates the expression, converts the result to a string, and updates that text node in the DOM. Template expressions are deliberately restricted — for safety and performance they cannot:

• Assign to variables ({{ x = 1 }} is disallowed)
• Use new, ++, or --
• Chain with ; or ,
• Reach global objects like window or document

💡 Analogy: Interpolation is a read-only display panel wired to a sensor. It shows the current value but never changes it — the flow is one way, screen only.

Property, Class & Style Binding

Property binding sets a DOM property to a component value using square brackets. Use it whenever the value isn't a plain string — booleans, numbers, objects — or when binding to a component's input.

<img [src]="hero().imageUrl" [alt]="hero().name" />
<button [disabled]="isSaving()">Save</button>
<input [value]="username()" />

<!-- Passing a value to a child component's input -->
<app-hero-detail [hero]="selectedHero()"></app-hero-detail>

Class binding

<!-- Toggle one class from a boolean -->
<div [class.active]="isActive()">Highlighted when active</div>

<!-- Multiple classes from an object -->
<div [ngClass]="{ active: isActive(), disabled: !isEnabled() }"></div>

Style binding

<!-- One style, with an optional unit suffix -->
<div [style.color]="textColor()">Colored</div>
<div [style.width.px]="width()">Sized in pixels</div>

<!-- Multiple styles from an object -->
<div [ngStyle]="{ color: textColor(), 'font-weight': isBold() ? 'bold' : 'normal' }"></div>

💡 Analogy: If interpolation is a display, property binding is a dial that gets turned to a specific position by a remote signal. Class and style bindings are the wardrobe: class binding picks which pre-made outfit to wear, style binding adjusts individual details like color and size.

Event Binding

Event binding listens for user actions — clicks, keystrokes, focus changes — using parentheses around the event name. The handler is a statement that usually calls a method on the class.

<button (click)="save()">Save</button>
<input (input)="onInput($event)" />
<div (mouseenter)="hover.set(true)" (mouseleave)="hover.set(false)">Hover me</div>
<form (submit)="onSubmit($event)">...</form>

The special $event variable carries the DOM event object so your handler can inspect it:

onSubmit(event: Event): void {
  event.preventDefault();          // stop the browser's default reload
  this.submitForm();
}

onKeyUp(event: KeyboardEvent): void {
  if (event.key === 'Enter') {
    this.search();
  }
}

Unlike Vue, Angular has no built-in event modifiers (such as .prevent). You handle those explicitly with event.preventDefault() or event.stopPropagation() inside your method — a small amount of extra code in exchange for being plain TypeScript.

💡 Analogy: Event binding is a set of sensors and alarms. When something happens — a button press, a mouse moving over an area — the alarm fires and dispatches the response team (your method) to handle it.

Two-Way Binding

Two-way binding combines property binding and event binding so a form field and a value stay in sync in both directions. The classic tool is [(ngModel)] — nicknamed the "banana in a box" for its [()] shape.

import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-greeter',
  standalone: true,
  imports: [FormsModule],  // ngModel lives in FormsModule
  template: `
    <input [(ngModel)]="name" placeholder="Your name" />
    <p>Hello, {{ name }}!</p>
  `,
})
export class GreeterComponent {
  name = 'Ada';
}

Under the hood, the banana-in-a-box is just shorthand for a property binding plus an event binding:

<!-- This… -->
<input [(ngModel)]="name" />

<!-- …is exactly this -->
<input [ngModel]="name" (ngModelChange)="name = $event" />

You can give your own components two-way bindable properties with the model() function, which creates a writable signal input that automatically emits a matching ...Change event:

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <button (click)="count.set(count() - 1)">-</button>
    <span>{{ count() }}</span>
    <button (click)="count.set(count() + 1)">+</button>
  `,
})
export class CounterComponent {
  count = model(0);   // enables [(count)] on the parent
}

<app-counter [(count)]="quantity"></app-counter>

💡 Analogy: Two-way binding is a smart thermostat. It shows the current temperature (value → view) and, when you nudge the dial, sends the new setting back to the furnace (view → value) — one control, both directions.

Control Flow: @if, @for, @switch

Angular 17 introduced a built-in control flow block syntax that replaces the older structural directives (*ngIf, *ngFor, *ngSwitch). It reads like ordinary code, needs no imports, and is faster. This is the syntax to learn today.

@if / @else

@if (heroes().length > 0) {
  <p>There are {{ heroes().length }} heroes.</p>
} @else if (loading()) {
  <p>Loading…</p>
} @else {
  <p>No heroes found.</p>
}

@for

The @for block requires a track expression so Angular can identify each item and reuse DOM nodes efficiently. It also offers a handy @empty block.

<ul>
  @for (hero of heroes(); track hero.id) {
    <li>{{ hero.name }}</li>
  } @empty {
    <li>The roster is empty.</li>
  }
</ul>

<!-- Contextual variables: $index, $first, $last, $even, $odd, $count -->
<ul>
  @for (hero of heroes(); track hero.id; let i = $index) {
    <li [class.first]="$first">{{ i + 1 }}. {{ hero.name }}</li>
  }
</ul>

@switch

@switch (hero().type) {
  @case ('warrior') {
    <app-warrior-detail [hero]="hero()" />
  }
  @case ('mage') {
    <app-mage-detail [hero]="hero()" />
  }
  @default {
    <app-unknown-detail [hero]="hero()" />
  }
}

Attribute directives still apply

Control flow decides whether and how many times elements appear. Attribute directives like ngClass and ngStyle instead modify existing elements, as we saw in the property-binding section. You can also write your own to encapsulate reusable behavior:

import { Directive, ElementRef, HostListener, inject, input } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
  standalone: true,
})
export class HighlightDirective {
  private el = inject(ElementRef);
  color = input('yellow', { alias: 'appHighlight' });

  @HostListener('mouseenter') onEnter() {
    this.el.nativeElement.style.backgroundColor = this.color();
  }
  @HostListener('mouseleave') onLeave() {
    this.el.nativeElement.style.backgroundColor = '';
  }
}

// Usage:  <p appHighlight="lightblue">Hover me</p>

💡 Analogy: Control flow blocks are the foreman deciding which sections of a building to construct and how many floors to repeat. Attribute directives are the finishing crew who change the appearance of walls that already exist.

Template Variables & Pipes

Template reference variables

A template reference variable, declared with #, gives you a handle on an element, component, or directive from elsewhere in the same template.

<input #nameInput placeholder="Name" />
<button (click)="greet(nameInput.value)">Greet</button>

<!-- Reference to a child component, then call its method -->
<app-counter #counter></app-counter>
<button (click)="counter.reset()">Reset counter</button>

Reference variables are scoped to the template they're declared in — you can't reach them from the class or another template.

Pipes

Pipes transform a value for display without changing the underlying data. Apply one with the | operator; pass arguments after a colon; chain several together.

<p>{{ name() | uppercase }}</p>
<p>{{ price() | currency:'USD' }}</p>
<p>{{ ratio() | percent:'1.0-1' }}</p>
<p>{{ joined() | date:'mediumDate' }}</p>
<p>{{ data() | json }}</p>

<!-- Chained: format the date, then uppercase it -->
<p>{{ joined() | date:'fullDate' | uppercase }}</p>

When the built-ins aren't enough, write your own standalone pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate',
  standalone: true,
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 100, trail = '…'): string {
    if (!value || value.length <= limit) return value ?? '';
    return value.substring(0, limit) + trail;
  }
}

// In a component's imports, then:  {{ longText() | truncate:50 }}

💡 Analogy: Pipes are kitchen appliances on a countertop. Raw ingredients (data) go in, a nicely prepared version comes out — and the pantry (your actual data) is never altered.

Hands-on Exercise

import { Component, signal, computed } from '@angular/core';
import { FormsModule } from '@angular/forms';

interface Task { id: number; title: string; done: boolean; }

@Component({
  selector: 'app-task-list',
  standalone: true,
  imports: [FormsModule],
  template: `
    <h2>Tasks ({{ visible().length }})</h2>

    <label>
      Show:
      <select [(ngModel)]="filter">
        <option value="all">All</option>
        <option value="active">Active</option>
        <option value="done">Done</option>
      </select>
    </label>

    <ul>
      @for (task of visible(); track task.id) {
        <li [class.done]="task.done">
          <input type="checkbox" [checked]="task.done"
                 (change)="toggle(task.id)" />
          {{ task.title }}
        </li>
      } @empty {
        <li>Nothing to show.</li>
      }
    </ul>
  `,
  styles: [`.done { text-decoration: line-through; opacity: 0.6; }`],
})
export class TaskListComponent {
  filter = signal<'all' | 'active' | 'done'>('all');
  tasks = signal<Task[]>([
    { id: 1, title: 'Learn interpolation', done: true },
    { id: 2, title: 'Learn @for', done: false },
    { id: 3, title: 'Build the exercise', done: false },
  ]);

  visible = computed(() => {
    const f = this.filter();
    return this.tasks().filter(t =>
      f === 'all' ? true : f === 'done' ? t.done : !t.done);
  });

  toggle(id: number): void {
    this.tasks.update(list =>
      list.map(t => t.id === id ? { ...t, done: !t.done } : t));
  }
}

Summary & Quiz

📚 Further Reading

• Angular — Binding
• Angular — Control flow (@if, @for, @switch)
• Angular — Pipes
• Angular — Two-way binding

🚀 What's Next?

You can now build expressive, reactive templates. Next we go deeper into how components talk to one another — component communication patterns for parent, child, and unrelated components across a growing app.