Sign in
Skip to solution
mediumFrontend

How does two-way binding work under the hood?

427 views
01

Understand the problem

Explain banana-in-a-box.

two-way-binding
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

[(x)] ('banana in a box') is sugar for a property binding plus an event binding: [x]="value" and (xChange)="value=$event". A component supports it by having an @Input() x and an @Output() xChange (the convention ngModel follows).

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

A two-way bindable component (the desugaring)
import { Component, Input, Output, EventEmitter } from '@angular/core';

// Expose value + valueChange to support [(value)] on this component.
@Component({
  selector: 'app-stepper',
  template: '<button (click)="dec()">-</button> {{ value }} <button (click)="inc()">+</button>',
})
export class StepperComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();   // name MUST be valueChange
  inc() { this.value++; this.valueChange.emit(this.value); }
  dec() { this.value--; this.valueChange.emit(this.value); }
}

// Parent can now write: <app-stepper [(value)]="count"></app-stepper>
// which Angular expands to [value]="count" (valueChange)="count = $event"
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 60 of 121 decoded in the Angular track. One more won't hurt.

Back to track