Data binding connects a component's class with its template. Angular has four forms, distinguished by the direction of data flow and their distinctive syntax.
1. Interpolation — class → view (text)
html
{{ title }}
{{ price * quantity }}
Data binding connects a component's class with its template. Angular has four forms, distinguished by the direction of data flow and their distinctive syntax.
{{ title }}
{{ price * quantity }}
<img [src]="imageUrl" /> <!-- bind a DOM property -->
<button [disabled]="isLoading">Save</button>
<app-child [user]="currentUser"></app-child> <!-- pass to a component @Input -->
Square brackets [ ] bind a property to an expression (one-way, data flows down into the view).
<button (click)="save()">Save</button> <!-- DOM event → method -->
<input (input)="onInput($event)" /> <!-- $event = the event object -->
<app-child (deleted)="onDeleted($event)"></app-child> <!-- component @Output -->
Parentheses ( ) listen for events (one-way, data flows up from the view to the class).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
The [(...)] syntax ("banana in a box") combines property + event binding for two-way sync — most commonly with ngModel on form inputs.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
The two-way [()] is just property binding [] plus event binding () combined — the brackets show the directions.
Data binding is how Angular keeps the class and template in sync — it's the mechanism behind every dynamic UI.
Knowing the four types and their syntax ({{}}, [], (), [()]) and which direction each flows is essential to reading and writing any Angular template; nearly every line of an Angular template uses one of them.