Data Binding

Data Binding

Data binding is the mechanism that connects your component's data (TypeScript) with the view (template). Angular has four types of data binding.

The Four Types

Type	Syntax	Direction
String Interpolation	{{ expression }}	Component → Template
Property Binding	[property]="expression"	Component → Template
Event Binding	(event)="handler()"	Template → Component
Two-Way Binding	[(ngModel)]="property"	Both directions

1. String Interpolation

// component
export class AppComponent {
    title = "My App";
    count = 42;
}

// template
<h1>{{ title }}</h1>
<p>Items: {{ count }}</p>
<p>{{ count > 0 ? 'Has items' : 'Empty' }}</p>

Interpolation converts the expression to a string and displays it. Works in text content and attribute values.

2. Property Binding

// component
export class AppComponent {
    imageUrl = "https://example.com/photo.jpg";
    isDisabled = true;
}

// template
<img [src]="imageUrl" [alt]="'User photo'">
<button [disabled]="isDisabled">Submit</button>
<input [value]="username">

Square brackets [] bind a DOM property to a component expression. The DOM property updates whenever the component value changes.

Interpolation vs Property Binding

<!-- These are equivalent for string values: -->
<p>{{ title }}</p>
<p [innerText]="title"></p>

<!-- But for non-string values, use property binding: -->
<button [disabled]="isDisabled"></button>  ✅
<button disabled="{{ isDisabled }}"></button>  ❌ Passes string "true"

3. Event Binding

// component
export class AppComponent {
    count = 0;

    increment(): void {
        this.count++;
    }

    onInputChange(event: Event): void {
        const input = event.target as HTMLInputElement;
        console.log(input.value);
    }
}

// template
<button (click)="increment()">Count: {{ count }}</button>
<input (input)="onInputChange($event)">

Parentheses () listen for DOM events and call a component method. Use $event to access the native event object.

Common Events

Event	Triggers When
(click)	Element is clicked
(input)	Input value changes
(keyup)	Key is released
(keyup.enter)	Enter key is pressed
(submit)	Form is submitted
(mouseover)	Mouse enters the element
(mouseout)	Mouse leaves the element

4. Two-Way Binding (Preview)

<!-- Combines property + event binding: -->
<input [(ngModel)]="username">
<p>Hello, {{ username }}!</p>

<!-- The input and paragraph stay in sync automatically -->

We'll cover two-way binding in detail in episode #13.

Data Binding Summary

Component  ──{{ value }}──>  Template    (interpolation)
Component  ──[prop]──────>  Template    (property binding)
Component  <──(event)─────  Template    (event binding)
Component  <─[(ngModel)]─>  Template    (two-way binding)

Key Takeaways

• Interpolation {{ }} — display values as text
• Property binding [] — set DOM properties from component data
• Event binding () — respond to user actions
• Two-way binding [()] — sync data in both directions
• Use property binding for non-string values (booleans, objects)
• $event gives you access to the native DOM event in handlers