Data Binding — Interpolation, Property, Event, and Two-Way Binding

Data binding is the mechanism that connects a component’s TypeScript class to its HTML template — synchronising data from class to view, and user interactions from view back to class. Angular has four binding forms: interpolation (displaying values), property binding (setting DOM properties), event binding (listening to DOM events), and two-way binding (synchronising form inputs). Mastering these four binding types is the foundation of building any interactive Angular UI. Everything from displaying a task title to handling a form submission uses one of these four patterns.

The Four Binding Types #

Property Binding — Common DOM Properties #

Common Event Bindings #

Complete Binding Examples #

// task-card.component.ts
import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
import { CommonModule, DatePipe }   from '@angular/common';
import { FormsModule }              from '@angular/forms';
import { Task }                     from '../../../shared/models/task.model';

@Component({
    selector:   'app-task-card',
    standalone: true,
    imports:    [CommonModule, FormsModule, DatePipe],
    templateUrl:'./task-card.component.html',
})
export class TaskCardComponent {
    @Input()  task!: Task;
    @Output() completed   = new EventEmitter<string>();
    @Output() deleted     = new EventEmitter<string>();

    isExpanded  = signal(false);
    editingTitle = signal(false);
    titleDraft  = signal('');

    get isOverdue(): boolean {
        return !!this.task.dueDate &&
               new Date(this.task.dueDate) < new Date() &&
               this.task.status !== 'completed';
    }

    startEditTitle(): void {
        this.titleDraft.set(this.task.title);
        this.editingTitle.set(true);
    }

    saveTitle(): void {
        if (this.titleDraft().trim()) {
            // Emit to parent — parent calls the API
            // (component should not directly call services for simple updates)
        }
        this.editingTitle.set(false);
    }

    onComplete(): void {
        this.completed.emit(this.task._id);
    }

    onDelete(): void {
        this.deleted.emit(this.task._id);
    }
}

<!-- task-card.component.html -- all four binding types demonstrated -->
<div class="task-card"
     [class.task-card--completed]="task.status === 'completed'"
     [class.task-card--overdue]="isOverdue"
     [attr.data-task-id]="task._id">

    <!-- ── Interpolation: display text values ────────────────────────── -->
    <h3 class="task-card__title">{{ task.title }}</h3>
    <p>Priority: {{ task.priority | titlecase }}</p>
    <p>Due: {{ task.dueDate | date:'mediumDate' }}</p>
    <p>{{ isOverdue ? 'OVERDUE' : 'On track' }}</p>

    <!-- ── Property binding: set DOM properties ──────────────────────── -->
    <img [src]="'/assets/icons/' + task.priority + '.svg'"
         [alt]="task.priority + ' priority icon'"
         [title]="'Priority: ' + task.priority">

    <span [class]="'badge badge--' + task.status">
        {{ task.status }}
    </span>

    <!-- Binding multiple classes conditionally -->
    <div [ngClass]="{
        'highlight': task.priority === 'high',
        'dimmed':    task.status === 'completed',
        'overdue':   isOverdue
    }">
        {{ task.description }}
    </div>

    <!-- Binding inline styles -->
    <div [style.opacity]="task.status === 'completed' ? '0.6' : '1'"
         [style.text-decoration]="task.status === 'completed' ? 'line-through' : 'none'">
        {{ task.title }}
    </div>

    <!-- ── Event binding: listen to DOM events ───────────────────────── -->
    <button (click)="isExpanded.set(!isExpanded())">
        {{ isExpanded() ? 'Collapse' : 'Expand' }}
    </button>

    <button (click)="onComplete()"
            [disabled]="task.status === 'completed'">
        Mark Complete
    </button>

    <button (click)="onDelete()"
            (mouseenter)="$event.target.classList.add('hover')"
            (mouseleave)="$event.target.classList.remove('hover')">
        Delete
    </button>

    <!-- Handle keyboard events -->
    <input (keydown.enter)="saveTitle()"
           (keydown.escape)="editingTitle.set(false)"
           [placeholder]="'Edit: ' + task.title">

    <!-- ── Two-way binding: sync input and class property ────────────── -->
    <div *ngIf="editingTitle()">
        <input [(ngModel)]="titleDraft"
               placeholder="Edit title..."
               (keydown.enter)="saveTitle()">
        <!-- [(ngModel)] requires FormsModule in imports -->
        <!-- Equivalent: [ngModel]="titleDraft" (ngModelChange)="titleDraft.set($event)" -->
    </div>

    <!-- ── Event emitting to parent component ────────────────────────── -->
    <!-- Parent template: <app-task-card (completed)="handleComplete($event)"> -->
    <button (click)="completed.emit(task._id)">Complete</button>

</div>

<!-- Expanded section - shown based on signal value -->
<div *ngIf="isExpanded()" class="task-card__details">
    <p>{{ task.description }}</p>
    <ul>
        <li *ngFor="let tag of task.tags">{{ tag }}</li>
    </ul>
</div>

How It Works #

Step 1 — Interpolation Converts Expressions to Strings #

Angular evaluates the expression inside {{ }} at runtime and converts the result to a string for display. The expression can be a property name, a method call, a ternary, arithmetic, or a pipe transform. Angular re-evaluates and updates the DOM whenever the component’s change detection runs. Interpolation automatically HTML-encodes special characters — < becomes < — preventing XSS.

Step 2 — Property Binding Sets JavaScript Properties #

[property]="expression" evaluates the expression and assigns the result to the DOM element’s JavaScript property (not the HTML attribute). [src]="imageUrl" is equivalent to element.src = imageUrl in JavaScript. Angular updates the property binding whenever the expression’s value changes during change detection. Property bindings accept any TypeScript expression — variables, method calls, object literals.

Step 3 — Event Binding Listens to DOM Events #

(click)="handler($event)" adds an event listener equivalent to element.addEventListener('click', handler). The $event object is the native browser event. Angular also supports event filtering: (keydown.enter) only fires when the Enter key is pressed. When the handler executes, Angular runs change detection afterwards to update bindings that may have changed as a result.

Step 4 — Two-Way Binding Is Property + Event Combined #

[(ngModel)]="property" is syntactic sugar for [ngModel]="property" (ngModelChange)="property = $event". The square bracket [ngModel] sets the input’s value from the class property. The round bracket (ngModelChange) updates the class property when the input changes. The combination keeps both the view and the class in sync — any change to either is reflected in the other immediately.

Step 5 — Banana in a Box: Understanding [()] Syntax #

The [()] syntax (called “banana in a box”) is Angular’s two-way binding notation. It works for any component that follows the convention: an input property named X and an output event named XChange. [(ngModel)] works because ngModel has both an @Input() ngModel and an @Output() ngModelChange. You can create your own two-way bindable components following the same pattern.

Common Mistakes #

Mistake 1 — Using attribute syntax instead of property binding for dynamic values #

❌ Wrong — string concatenation in HTML attribute does not update dynamically:

<img src="/images/{{ user.avatar }}">
<!-- This works for initial render but can cause a broken request before Angular processes it -->

✅ Correct — use property binding for dynamic values:

<img [src]="'/images/' + user.avatar">

Mistake 2 — Forgetting FormsModule for ngModel #

❌ Wrong — ngModel not available, template error:

@Component({
    standalone: true,
    imports:    [CommonModule],  // FormsModule missing!
    template:   `<input [(ngModel)]="title">`
})
// Error: Can't bind to 'ngModel' since it isn't a known property of 'input'

✅ Correct — add FormsModule to imports:

@Component({
    standalone: true,
    imports: [CommonModule, FormsModule],
    template: `<input [(ngModel)]="title">`
})

Mistake 3 — Calling methods in templates that have side effects #

❌ Wrong — getFilteredTasks() called on every change detection cycle:

<li *ngFor="let task of getFilteredTasks()">
<!-- getFilteredTasks() is called many times per second — avoid API calls or heavy computation here -->

✅ Correct — compute derived data in the class as a getter or signal:

filteredTasks = computed(() =>
    this.tasks().filter(t => t.status === this.filterStatus())
);
// Template: *ngFor="let task of filteredTasks()"
// Only recomputed when tasks() or filterStatus() changes

Quick Reference #