Data binding in Angular
What is Data Binding?
Data binding is the mechanism that connects the component's TypeScript class (data/logic) with the template (HTML). Angular supports four types of data binding.
1. Interpolation (One-way: Component โ Template)
Display component data in the template using double curly braces:
typescript
// app.component.ts
@Component({
template: \`
<h1>{{ title }}</h1>
<p>{{ 2 + 2 }}</p>
<p>{{ user.name.toUpperCase() }}</p>
\`
})
export class AppComponent {
title = 'Hello Angular';
user = { name: 'Alice' };
}2. Property Binding (One-way: Component โ Template)
Bind component data to an element's property:
html
<!-- Bind to DOM property -->
<img [src]="imageUrl" [alt]="imageAlt">
<button [disabled]="isLoading">Submit</button>
<div [class.active]="isActive">Content</div>
<div [style.color]="textColor">Styled</div>
<!-- Equivalent to: -->
<img src="{{ imageUrl }}"> <!-- Only for string attributes -->3. Event Binding (One-way: Template โ Component)
Listen to DOM events and call component methods:
html
<button (click)="onClick()">Click me</button>
<input (input)="onInput($event)">
<form (submit)="onSubmit($event)">
<div (mouseenter)="onHover()" (mouseleave)="onLeave()">typescript
export class AppComponent {
onClick() {
console.log('Clicked!');
}
onInput(event: Event) {
const value = (event.target as HTMLInputElement).value;
console.log(value);
}
}4. Two-Way Binding (Component โ Template)
Combines property + event binding using [(ngModel)]:
html
<!-- Requires FormsModule import -->
<input [(ngModel)]="username">
<p>Hello, {{ username }}!</p>
<!-- Equivalent to: -->
<input [ngModel]="username" (ngModelChange)="username = $event">Summary
| Type | Syntax | Direction |
|---|---|---|
| Interpolation | {{ expression }} | Component โ Template |
| Property binding | [property]="expr" | Component โ Template |
| Event binding | (event)="handler" | Template โ Component |
| Two-way binding | [(ngModel)]="prop" | Component โ Template |
Important:
Angular's data binding system connects the component class to the template. Interpolation and property binding flow data from component to view. Event binding flows from view to component. Two-way binding ([(ngModel)]) combines both, keeping the input and component property in sync.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.