Templates & Data Binding

A template is not HTML that Angular "fills in" with string replacement. The compiler turns it into a function that creates the DOM once and then, on every change detection pass, re-evaluates each binding and writes only the ones whose value changed. Every binding syntax in this chapter is a different instruction in that function.

Interpolation — {{ expression }} — is the simplest one: evaluate the expression against the component instance, convert the result to a string, and write it into a text node. A good mental model: the template is a live view of the component's fields. {{ name }} means "this text node always shows whatever this.name is right now".

The expression is a restricted JavaScript expression whose scope is the component instance (no this.), plus any template variables. It can't see globals: {{ Math.max(1, 2) }} fails with TS2339: Property 'Math' does not exist on type '<your component>', and {{ name = 'x' }} fails with "Parser Error: Bindings cannot contain assignments". Angular 22 templates do accept ?., ??, template literals, typeof, ** and in.

@Component({
  selector: 'app-greeting',
  template: `
    <h1>Hello, {{ name }}!</h1>
    <p>{{ items.length }} items, total {{ price * qty }}</p>
    <p>{{ user?.email ?? 'no email' }}</p>
    <p>[{{ nothing }}] [{{ tags }}] [{{ settings }}]</p>
    <img src="/avatars/{{ id }}.png" alt="{{ name }}'s avatar" />
  `,
})
export class Greeting {
  name = 'Rohit';
  items = ['a', 'b', 'c'];
  price = 2.5;
  qty = 4;
  user: { email?: string } | null = null;
  nothing: string | undefined = undefined;
  tags = ['ng', 'ts'];
  settings = { dark: true };
  id = 42;
}

function Greeting_Template(rf, ctx) {
  if (rf & 1) {
    ɵɵdomElementStart(0, "h1");
    ɵɵtext(1);
    ɵɵdomElementEnd();
    // … the <p>s …
    ɵɵdomElement(8, "img", 3);
  }
  if (rf & 2) {
    ɵɵadvance();
    ɵɵtextInterpolate1("Hello, ", ctx.name, "!");
    ɵɵadvance(2);
    ɵɵtextInterpolate2("", ctx.items.length, " items, total ", ctx.price * ctx.qty);
    // …
    ɵɵdomProperty("src", ɵɵinterpolate1("/avatars/", ctx.id, ".png"), ɵɵsanitizeUrl)
                 ("alt", ɵɵinterpolate1("", ctx.name, "'s avatar"));
  }
}

Property binding — [target]="expression" — sets a DOM property (or a directive/component input) to the value of the expression. Not a string version of it: the actual value, whatever its type. [disabled]="isLocked" assigns a boolean, [user]="currentUser" passes an object reference.

The key distinction is attribute vs property. An HTML attribute is what you write in the markup; the browser reads it once to initialise the element. A DOM property is a field on the live JavaScript object, and it's what the browser actually uses from then on. For <input value="Rohit">, the value attribute is the initial value; input.value is what's in the box now. Angular's square brackets set the property, so the mental model is literally element.value = expression — run again whenever the expression's result changes.

@Component({
  selector: 'app-profile-form',
  template: `
    <input [value]="name()" [disabled]="locked()" />
    <img [src]="avatarUrl()" [alt]="name()" />
    <button [disabled]="!canSave()">Save</button>
    <button (click)="name.set('Rohit')">Reset</button>
  `,
})
export class ProfileForm {
  name = signal('Rohit');
  locked = signal(false);
  avatarUrl = signal('/avatars/42.png');
  canSave = signal(false);
}

For a string property the two forms do the same thing: title="{{ heading }}" and [title]="heading" both end up as element.title = heading. The difference is that interpolation always produces a string, while property binding passes the value through unchanged. That matters as soon as the target isn't a string.

interface User {
  name: string;
}

@Component({
  selector: 'app-user-card',
  template: `<p>{{ user().name }}</p>`,
})
export class UserCard {
  user = input.required<User>();
}

@Component({
  selector: 'app-interp-vs-prop',
  imports: [UserCard],
  template: `
    <button disabled="{{ locked }}">A</button>
    <button [disabled]="locked">B</button>
    <p title="{{ count }}">{{ count }}</p>
    <app-user-card [user]="me" />
  `,
})
export class InterpVsProp {
  locked = false;
  count = 3;
  me: User = { name: 'Rohit' };
}

<button disabled="{{ isAdmin }}">Delete</button>
<input type="checkbox" checked="{{ isAdmin }}" />

Property binding needs a DOM property to set. Some things are attributes with no matching property: ARIA attributes, data-*, SVG attributes, and a few HTML ones whose property has a different name. For these, [attr.name]="expression" calls setAttribute('name', String(value)) — and a value of null or undefined removes the attribute.

@Component({
  selector: 'app-attr-demo',
  template: `
    <table>
      <tr><td [attr.colspan]="span()">Total</td></tr>
      <tr><td [colSpan]="span()">Total</td></tr>
    </table>
    <button [attr.aria-label]="label()" [attr.data-id]="id()">X</button>
    <button [aria-label]="label()">Y</button>
  `,
})
export class AttrDemo {
  span = signal(2);
  label = signal<string | null>('Close dialog');
  id = signal(7);
}

Classes and inline styles have their own binding forms, because you rarely want to replace the whole class attribute — you want to toggle individual classes while leaving the static ones alone. Angular merges every source of classes on an element (static class="…", [class], [class.x], host bindings from directives) into one result.

@Component({
  selector: 'app-class-style',
  imports: [NgClass],
  template: `
    <li class="item" [class.active]="active()" [class.done]="done()">One</li>
    <div class="card" [class]="{ highlighted: highlighted(), compact: compact() }">Card</div>
    <div [class]="['a', 'b']">List</div>
    <div [style.width.px]="width()" [style.background-color]="color()">Bar</div>
    <div [style]="{ 'font-weight': 'bold', opacity: 0.5 }">Obj</div>
    <div [ngClass]="{ highlighted: highlighted() }">Old</div>
  `,
})
export class ClassStyle {
  active = signal(true);
  done = signal(false);
  highlighted = signal(true);
  compact = signal(false);
  width = signal(120);
  color = signal('teal');
}

Event binding — (eventName)="statement" — is the opposite direction: view → component. Angular adds a listener to the element and, when the event fires, runs the statement in the component's context. Unlike binding expressions, an event statement may have side effects: call methods, assign fields, signal.set(…), even several statements separated by ;.

Inside the statement, $event is whatever the event delivered. For a DOM event that's the native event object (InputEvent, KeyboardEvent, PointerEvent for click). For a component output(), it's the emitted value. After the handler runs, Angular marks the component for checking, so anything it changed shows up in the view.

@Component({
  selector: 'app-todo-input',
  template: `
    <input
      [value]="text()"
      (input)="onInput($event)"
      (keydown.enter)="add()"
      (keydown.escape)="text.set('')"
    />
    <button (click)="add()">Add</button>
    <ul>
      @for (t of todos(); track $index) {
        <li>{{ t }}</li>
      }
    </ul>
  `,
})
export class TodoInput {
  text = signal('');
  todos = signal<string[]>([]);

  onInput(event: Event) {
    this.text.set((event.target as HTMLInputElement).value);
  }

  add() {
    if (!this.text().trim()) return;
    this.todos.update((list) => [...list, this.text()]);
    this.text.set('');
  }
}

<!-- ✅ compiles: <input> is a void element, so $event.target is asserted to be the input -->
<input (input)="text.set($event.target.value)" />

<!-- ❌ TS2531: Object is possibly 'null'.
     ❌ TS2339: Property 'value' does not exist on type 'EventTarget'. -->
<textarea (input)="text.set($event.target.value)"></textarea>

<!-- ✅ $event is a PointerEvent for (click) -->
<button (click)="log($event.pointerId)">p</button>

Two-way binding keeps a value in the parent and a value in the child (or a form control) in sync in both directions. Angular doesn't have a special two-way mechanism — [(x)]="value" is pure syntactic sugar for a property binding plus an event binding:

[(size)]="fontSize" means [size]="fontSize" (sizeChange)="fontSize = $event"

The brackets-inside-parentheses shape is called banana in a box: [()]. The rule the compiler relies on is a naming convention: the output must be called <input name>Change.

// Old style (Angular 16): an @Input plus an @Output named <input>Change.
@Component({
  selector: 'app-sizer-old',
  template: `<button (click)="inc()">+</button><span>{{ size }}</span>`,
})
export class SizerOld {
  @Input() size = 16;
  @Output() sizeChange = new EventEmitter<number>();

  inc() {
    this.size++;
    this.sizeChange.emit(this.size);
  }
}

// Modern: model() is the input and the output in one.
@Component({
  selector: 'app-sizer',
  template: `<button (click)="size.update(s => s + 1)">+</button><span>{{ size() }}</span>`,
})
export class Sizer {
  size = model(16);
}

@Component({
  selector: 'app-two-way',
  imports: [SizerOld, Sizer, FormsModule],
  template: `
    <app-sizer-old [(size)]="oldSize" />
    <app-sizer [(size)]="fontSize" />
    <app-sizer [size]="fontSize()" (sizeChange)="fontSize.set($event)" />
    <p [style.font-size.px]="fontSize()">{{ oldSize }} / {{ fontSize() }}</p>
    <input [(ngModel)]="name" />
    <p>Hello {{ name() }}</p>
  `,
})
export class TwoWay {
  oldSize = 12;
  fontSize = signal(16);
  name = signal('Rohit');
}

All of Angular's template syntax follows one pattern. The left side of = is the target — a name that belongs to the element, directive or child component. The right side is the source — an expression evaluated against your component. The punctuation around the target tells you which way the data flows.

Memory aid: [] is data in, () is events out, [()] is both. Square brackets mean "evaluate the right side as an expression"; without them, title="Hello" is a static attribute and [title]="Hello" would look up a field called Hello.

The long-hand forms still compile in Angular 22 — bind-value="v" works like [value]="v" and on-input="…" like (input)="…" (both verified in a test) — but nobody writes them; you'll only see them in very old code.

From Rohit's notes, marked "Very important !!!!": a template only re-renders when Angular knows something changed. In Angular 22 that knowledge comes from three places: signals read by the template, events handled by the template (and inputs changing), and explicit calls like markForCheck(). A plain class field changing on its own tells Angular nothing.

Two Angular 22 defaults make this sharper than it was in Angular 16: there is no zone.js (new apps are zoneless, so setTimeout or a fetch callback doesn't trigger change detection by itself), and components are OnPush by default (ChangeDetectionStrategy in core.d.ts says "NOTE: OnPush is enabled by default"). See Zoneless Angular and OnPush.

@Component({
  selector: 'app-counter',
  template: `
    <p>plain: {{ plainCount }}</p>
    <p>signal: {{ count() }}</p>
    <button (click)="clickBoth()">+1 both</button>
    <button (click)="count.update(c => c + 10)">+10</button>
  `,
})
export class Counter {
  plainCount = 0;
  count = signal(0);

  clickBoth() {
    this.plainCount++;
    this.count.update((c) => c + 1);
  }

  later() {
    setTimeout(() => (this.plainCount = 5)); // nobody tells Angular
  }
}

<p>{{ count }}</p>

Every binding in a template is re-evaluated each time that component's view is checked — Angular has to call the expression to find out whether its value changed. If the expression is a method call, the method runs on every check, even when its inputs haven't changed. For a cheap getter that's fine; for filtering or totalling a large list, it's wasted work on every keystroke and click.

The fix is to cache the result so that a check costs a comparison, not a recomputation: a computed() signal (recomputes only when a signal it reads changes), a pure pipe (re-runs only when its input reference changes), or a value you precompute when the data changes.

@Component({
  selector: 'app-cart',
  template: `
    <p>method: {{ total() }}</p>
    <p>computed: {{ totalC() }}</p>
    <p>clicks: {{ clicks() }}</p>
    <button (click)="clicks.update(c => c + 1)">click</button>
    <button (click)="addItem()">add</button>
  `,
})
export class Cart {
  items = signal<Item[]>([
    { name: 'pen', price: 2 },
    { name: 'book', price: 10 },
  ]);
  clicks = signal(0);
  methodCalls = 0;
  computedCalls = 0;

  total() {
    this.methodCalls++;
    return this.items().reduce((sum, i) => sum + i.price, 0);
  }

  totalC = computed(() => {
    this.computedCalls++;
    return this.items().reduce((sum, i) => sum + i.price, 0);
  });

  addItem() {
    this.items.update((list) => [...list, { name: 'bag', price: 30 }]);
  }
}

Templates have two ways to declare names of their own.

A template reference variable — #name on an element — gives the rest of the template a reference to that element (an HTMLInputElement, say). On a component tag it refers to the component instance; on <ng-template> to a TemplateRef; and with a value, #f="ngForm", to whatever the directive exports under that name.

@let declares a local, read-only variable computed from an expression: @let total = price() * qty();. It re-evaluates on every check, like any binding, and is visible after its declaration, including inside nested blocks.

@Component({
  selector: 'app-refs',
  template: `
    <input #box (keydown.enter)="add(box.value); box.value = ''" />
    <button (click)="box.focus()">Focus</button>
    <button (click)="add(box.value)">Add {{ box.value }}</button>

    @let fullName = first() + ' ' + last();
    @let count = names().length;
    <p>{{ fullName }} has {{ count }} names</p>
    <ul>
      @for (n of names(); track $index) {
        <li>{{ n }} ({{ fullName }})</li>
      }
    </ul>
  `,
})
export class Refs {
  first = signal('Rohit');
  last = signal('Varma');
  names = signal<string[]>([]);

  add(value: string) {
    if (value) this.names.update((list) => [...list, value]);
  }
}

Cross-site scripting (XSS) is getting attacker-controlled text interpreted as code in a user's browser — a comment containing <img src=x onerror="steal()">, for example. Angular's defence is that it treats every bound value as untrusted by default and decides what to do based on where it's going:

• Text ({{ }}, [textContent]): written as text, never parsed as HTML. Always safe.
• HTML ([innerHTML]): parsed, then sanitized — scripts, event-handler attributes and dangerous URLs are stripped.
• URL ([href], [src]): checked; a javascript: URL is neutralised by prefixing unsafe:.
• Resource URL (<iframe src>, <script src>): can't be bound from a plain string at all — <iframe [src]="url"> with a string throws NG0904: unsafe value used in a resource URL context at runtime.

The server side of this story — output encoding, CSP, cookies — is in the Node site's Cross-site scripting (XSS) topic.

@Component({
  selector: 'app-comment',
  template: `
    <p>{{ comment }}</p>
    <div [innerHTML]="comment"></div>
    <a [href]="website">website</a>
    <div [innerHTML]="trusted"></div>
  `,
})
export class Comment {
  comment = '<b>Nice!</b><img src="x" onerror="alert(1)"><script>alert(2)</script>';
  website = 'javascript:alert(3)';

  private sanitizer = inject(DomSanitizer);
  // ⚠️ Only for HTML you produced or sanitised yourself — this turns the protection off.
  trusted: SafeHtml = this.sanitizer.bypassSecurityTrustHtml('<img src="x" onerror="alert(4)">');
}