What Is Angular Data Binding? : A Comprehensive Guide

Estimated study time: 10 minutes. How your component's data and the DOM stay perfectly in sync.

Data binding is the mechanism that connects a component's TypeScript data to what's shown in its HTML template — and connects user interaction back to the component. It's one of Angular's most fundamental features.

1. Interpolation — Component to View

Displays a component property's value inside the template using double curly braces.

<h2>Welcome, {{ userName }}!</h2>

2. Property Binding — Component to View

Binds a component value to an element's property, attribute, or a child component's @Input().

<img [src]="productImageUrl" [alt]="productName">
<app-card [title]="cardTitle"></app-card>

3. Event Binding — View to Component

Listens for a DOM event and calls a component method in response.

<button (click)="addToCart()">Add to Cart</button>
<input (keyup)="onKeyUp($event)">

4. Two-Way Binding — Both Directions

Combines property and event binding using the [(ngModel)] "banana in a box" syntax, keeping a form control and a component property in sync automatically.

<input [(ngModel)]="userName">
<p>You typed: {{ userName }}</p>

Two-way binding requires importing FormsModule in the relevant module or standalone component.

Choosing the Right Binding