Data Binding in Angular

Data Binding

Data binding is one of the most important and powerful features in Angular, which allows us to define communication between the component and view or template. In Angular 21, Signals are the modern reactive primitive that work seamlessly with all data binding types. There are mainly four types of data binding available in Angular, such as-

String Interpolation

Renders a component property value into the template using double curly braces {{ }}. Works with both plain properties and signals.

String Interpolation

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>{{ title() }}</h1>
    <p>2 + 2 = {{ 2 + 2 }}</p>
    <p>{{ greeting.toUpperCase() }}</p>
  `
})
export class AppComponent {
  title = signal('Angular 21');
  greeting = 'hello world';
}

Property Binding

Binds a component property to a DOM element property using square brackets [ ]. Flows data from component to template.

Property Binding

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <img [src]="logoUrl" [alt]="logoAlt" />
    <button [disabled]="isDisabled()">Submit</button>
    <p [class.highlight]="isActive">Highlighted text</p>
  `,
  styles: ['.highlight { background: yellow; }']
})
export class AppComponent {
  logoUrl = 'https://angular.io/assets/images/logos/angular/angular.svg';
  logoAlt = 'Angular Logo';
  isDisabled = signal(false);
  isActive = true;
}

Event Binding

Listens to DOM events using parentheses ( ). Flows data from template to component.

Event Binding

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <button (click)="increment()">Click me</button>
    <p>Clicked {{ count() }} times</p>
    <input (keyup.enter)="onEnter($event)" placeholder="Press Enter" />
  `
})
export class AppComponent {
  count = signal(0);
  increment() { this.count.update(c => c + 1); }
  onEnter(event: Event) {
    console.log((event.target as HTMLInputElement).value);
  }
}

Two-Way Data Binding

Combines property and event binding using [(ngModel)] (requires FormsModule) or the modern model() signal for component-to-component two-way binding.

Two-Way Binding

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  template: `
    <h2>Welcome: {{ userName }}</h2>
    <input type="text" [(ngModel)]="userName" placeholder="Enter your name" />
  `
})
export class AppComponent {
  userName = 'Angular';
}

Signals - Modern Reactive State (Angular 21)

Angular 21 uses Signals as the primary reactive primitive. Signals provide a simpler and more efficient way to manage state compared to traditional change detection:

signal(value) - Creates a writable signal.
computed(() => ...) - Creates a derived read-only signal.
effect(() => ...) - Runs a side effect when signals change.

Signals work seamlessly with all four data binding types and enable zoneless change detection.

Previous Next

Data Binding in Angular

Data Binding

String Interpolation

Property Binding

Event Binding

Two-Way Data Binding

Signals - Modern Reactive State (Angular 21)

Ready to Level Up Your Skills?