Angular › Data Binding

How does two way binding using the banana in a box syntax, square brackets and parentheses together, actually work behind the scenes?

Intermediate

Answer

Two way binding is really a combination of a property binding and an event binding happening together. The square brackets set the input's value from your component's property, while the parentheses listen for a change event and update that same property, keeping both sides automatically in sync.

// This shorthand
<input [(ngModel)]="name" />

// Is equivalent to writing it out fully
<input [ngModel]="name" (ngModelChange)="name = $event" />

Real-world example A search input field automatically updates a component's searchTerm property as the user types, and also updates the input's displayed value if searchTerm is changed elsewhere in the code, thanks to two way binding keeping both sides in sync.

Common follow-ups: Could you build your own custom two way binding for a custom component, not just form inputs?;Why must the changed event name always end with the word Change for this shorthand to work?

Forms;Components & Templates