How does two-way binding work under the hood? | Interview Question

Q: How does two-way binding work under the hood?

**Target Audience:** Developers who use [(ngModel)] and want to know what it really is — assumes property and event binding. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The binding types themselves are covered in [the types of data binding](/interview-question/what-are-the-types-of-data-binding-in-angular); this doc goes into the compiled instructions and the runtime. Every compiled line below was copied from ngc output on Angular 22.2.3, runtime code is quoted from the installed @angular/core bundle, and the example output came from running it in jsdom. ## 1. Why This Even Matters — A Story First Two walkie-talkies can feel like a telephone, but they are not one. Each one only ever transmits or receives at a time. The illusion of a conversation comes from two one-way channels and a rule about taking turns. Angular two-way binding is the same trick. There is no magic s

The problem

Question presented to candidate: "Explain what Angular actually does with [(size)]="fontSize". What does it compile to, how does it work with both signals and plain fields, and what does a component need to support it?"

What a strong answer should cover:

[(x)]="v" is syntactic sugar for a property binding [x] plus an event binding (xChange) that writes $event back.
Any component with an input x and an output xChange supports it: @Input + @Output, or one model().
The compiler emits ɵɵtwoWayProperty and ɵɵtwoWayListener; the listener calls ɵɵtwoWayBindingSet(target, $event), which calls .set() on a writable signal or falls back to assignment.
Hence the right-hand side must be writable: a signal reference or a field, not v() (NG5002) or a computed.
ngModel is just a directive with input ngModel and output ngModelChange.
The data flow stays one-way in each direction; there is no dirty-checked shared variable as in AngularJS.

Clarifying questions expected:

"Do you want the template-level desugaring or the compiled instructions?"

Code / implementation expected: Yes — a custom two-way bindable component, plus the hand-written equivalent of the sugar.

two-way-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: Developers who use [(ngModel)] and want to know what it really is — assumes property and event binding. Difficulty: Medium

How to read this doc: Plain language first, then 📌 Interview term: callouts. The binding types themselves are covered in the types of data binding; this doc goes into the compiled instructions and the runtime. Every compiled line below was copied from ngc output on Angular 22.2.3, runtime code is quoted from the installed @angular/core bundle, and the example output came from running it in jsdom.

1. Why This Even Matters — A Story First

Two walkie-talkies can feel like a telephone, but they are not one. Each one only ever transmits or receives at a time. The illusion of a conversation comes from two one-way channels and a rule about taking turns.

Angular two-wa

The solution is hidden so you can try first

9 min read · 12 sections

Read the code

AngularA two-way bindable component, the desugared form, and ngModel on one signal

Open in playground

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

// A hand-made two-way bindable component: input "size" + output "sizeChange".
// That naming pair is the whole contract behind [(size)].
@Component({
  selector: "app-sizer",
  template: `
    <button (click)="resize(-1)">-</button>
    <span [style.font-size.px]="size">{{ size }}px</span>
    <button (click)="resize(+1)">+</button>
  `,
})
export class SizerComponent {
  @Input() size = 16;
  @Output() sizeChange = new EventEmitter<number>();

  resize(delta: number) {
    // The child never writes the parent value. It announces the new one.
    this.sizeChange.emit(Math.min(40, Math.max(8, this.size + delta)));
  }
}

@Component({
  selector: "app-root",
  imports: [SizerComponent, FormsModule],
  template: `
    <!-- 1. Sugar -->
    <app-sizer [(size)]="fontSize" />
    <!-- 2. What the sugar means, written by hand -->
    <app-sizer [size]="fontSize()" (sizeChange)="fontSize.set($event)" />
    <!-- 3. The same pattern on a native input, via the ngModel directive -->
    <input type="number" [(ngModel)]="fontSize" />
    <p>Parent fontSize = {{ fontSize() }}</p>
  `,
})
export class AppComponent {
  fontSize = signal(16);
}

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.