Data Binding in Angular Two Way Binding: Tutorial, Examples, FAQs & Interview Tips

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-

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

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

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

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

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

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

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 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:

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

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

Previous Next