What are the types of data binding in Angular? | Interview Question

Q: What are the types of data binding in Angular?

**Target Audience:** Anyone preparing for an Angular interview — assumes HTML and a little TypeScript. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The outputs, compiler errors and the generated instructions quoted below all came from compiling the code with ngc on Angular 22.2.3 and running it in jsdom. ## 1. Why This Even Matters — A Story First Think of a component as a shop and the template as its shop window. Some things only travel **outwards**: the price tag in the window shows whatever the shop decides (that is a one-way binding into the template). Some things only travel **inwards**: a customer rings the bell and the shopkeeper reacts (that is an event). And occasionally you want a whiteboard in the window that both the shop and the passer-by can write on, and both always see the same words (that is two-way binding). Data binding is just the set of wires between the class and its template

The problem

Question presented to candidate: "List the kinds of data binding Angular templates support, say which direction each one goes, and explain what [(ngModel)] actually expands to."

What a strong answer should cover:

Interpolation {{ }}: component to text, always escaped (safe against HTML injection).
Property binding [prop]: component to a DOM property (not an HTML attribute).
Attribute, class and style bindings: [attr.x], [class.x], [style.x] for things that are not properties, or for single classes and styles.
Event binding (event): DOM or component events to a handler, with $event as the payload.
Two-way binding [(x)]: sugar for [x] plus (xChange), which works with a writable signal or a field.
The direction model: one-way by default, two-way only where you write it; property versus attribute is the classic trap.

Clarifying questions expected:

"Do you also want how this works with signals, or the template syntax only?"

Code / implementation expected: Yes — one template using every binding type, plus what the compiler turns it into.

data-binding

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Anyone preparing for an Angular interview — assumes HTML and a little TypeScript. Difficulty: Easy

How to read this doc: Plain language first, then 📌 Interview term: callouts. The outputs, compiler errors and the generated instructions quoted below all came from compiling the code with ngc on Angular 22.2.3 and running it in jsdom.

1. Why This Even Matters — A Story First

Think of a component as a shop and the template as its shop window. Some things only travel outwards: the price tag in the window shows whatever the shop decides (that is a one-way binding into the template). Some things only travel inwards: a customer rings the bell and the shopkeeper reacts (that is an event). And occasionally you want a whiteboard in the window that both the shop and the passer-by can write on, and both always see the same words (that is two-way binding).

The solution is hidden so you can try first

7 min read · 10 sections

Read the code

AngularEvery binding type in one template

Open in playground

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

@Component({
  selector: "app-root",
  imports: [FormsModule], // needed only for [(ngModel)]
  template: `
    <!-- 1. Interpolation: component to text -->
    <h3>Hello, {{ name() }}</h3>

    <!-- 2. Property binding: component to a DOM property -->
    <button [disabled]="name().length === 0" (click)="greet()">Greet</button>

    <!-- 3. Attribute, class and style bindings: also one-way, into the element -->
    <p [attr.aria-label]="'greeting for ' + name()"
       [class.loud]="loud()"
       [style.font-weight]="loud() ? 700 : 400">{{ log() }}</p>

    <!-- 4. Event binding: DOM event to component -->
    <label><input type="checkbox" (change)="loud.set(!loud())" /> loud</label>

    <!-- 5. Two-way binding: [property] + (event) in one. A writable signal works directly. -->
    <input [(ngModel)]="name" />
  `,
})
export class AppComponent {
  name = signal("Ada");
  loud = signal(false);
  log = signal("not greeted yet");
  greet() {
    this.log.set(`greeted ${this.name()}`);
  }
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.