mediumFrontend

How does two-way binding work under the hood?

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

## Two-way binding = property binding + event binding The `[(x)]` 'banana in a box' syntax is **syntactic sugar**. `[(value)]="prop"` desugars to a **property binding down** plus an **event binding up**: [(value)] [value] (down) (valueChange) (up) one sugar = a property binding + an event binding So for a component to support `[(value)]`, it need

427 views

Understand the problem

Explain banana-in-a-box.

two-way-binding

Attempt it yourself

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

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

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"

Join the discussion

Discussion (0)

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

What is the difference between constructor-based DI and the inject() function?

How do you read route parameters?