Data Binding

Learning objectives#

• Name the four binding types and their syntax
• Tell which direction each one flows
• Combine them in one form
• Choose the right binding for a task

Explanation#

Interpolation {{ value }} — class → view, as text.

Property binding [property]="value" — class → view, into a DOM or component property: [disabled]="isSaving", [src]="imageUrl", [price]="p.price".

Event binding (event)="handler($event)" — view → class: (click), (input), (submit), or a child component’s output.

Two-way binding [(model)]="value" — both ways at once. It is shorthand for a property binding plus an event binding. Used with ngModel in forms and with model() inputs on components.

Remember the “banana in a box” [( )]: square brackets bring data in, round brackets send events out.

Syntax#

1<p>{{ name }}</p>                       <!-- class → view (text) -->
2<button [disabled]="saving">Save</button> <!-- class → view (property) -->
3<button (click)="save()">Save</button>    <!-- view → class (event) -->
4<input [(ngModel)]="name" />              <!-- both ways -->

Code example: All four bindings in one profile editor#

1import { Component, signal } from '@angular/core';
2import { FormsModule } from '@angular/forms';
3

4@Component({
5  selector: 'app-profile',
6  imports: [FormsModule],
7  template: `
8    <h2>Hello, {{ name() || 'stranger' }}!</h2>                  <!-- interpolation -->
9

10    <img [src]="avatarUrl" [alt]="'Avatar of ' + name()" width="64" />   <!-- property -->
11

12    <input [(ngModel)]="nameModel" (ngModelChange)="name.set($event)" placeholder="Your name" />  <!-- two-way + event -->
13

14    <button [disabled]="!name()" (click)="save()">Save</button>  <!-- property + event -->
15    @if (saved()) { <p>Saved {{ name() }} ✔</p> }
16  `,
17})
18export class Profile {
19  name = signal('');
20  nameModel = '';
21  saved = signal(false);
22  avatarUrl = 'https://i.pravatar.cc/64';
23

24  save() {
25    this.saved.set(true);
26  }
27}

The heading starts as “Hello, stranger!” and the Save button is disabled. Typing “Asha” updates the heading live and enables the button. Clicking Save shows “Saved Asha ✔”.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. {{ name() || "stranger" }} displays text from the class.
2. [src] and [alt] set element properties from class values.
3. [(ngModel)] keeps nameModel and the input in sync; (ngModelChange) also copies each change into the name signal.
4. [disabled]="!name()" enables Save only when a name exists.
5. (click)="save()" calls a class method.

Real-world use case#

Common mistakes#

Best practices#

• Use the simplest binding that works
• Prefer signals for component state
• Use [attr.x] for pure HTML attributes
• Keep event handlers as method calls

Remember this#

Practice exercise#

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

3@Component({
4  selector: 'app-qty',
5  template: `
6    <button [disabled]="qty() <= 1" (click)="decrease()">−</button>
7    <span> {{ qty() }} </span>
8    <button (click)="increase()">+</button>
9  `,
10})
11export class Qty {
12  qty = signal(1);
13  increase() { this.qty.update(q => q + 1); }
14  decrease() { this.qty.update(q => Math.max(1, q - 1)); }
15}

Mini quiz#

Want more? Practise all Angular MCQs · Angular interview questions

Related topics#

My notes#

Saved in this browser.