Data Binding trong Angular

Data Binding là cơ chế giúp đồng bộ dữ liệu giữa Component và Template trong Angular. Nó giúp hiển thị dữ liệu động, lắng nghe sự kiện và cập nhật giao diện khi dữ liệu thay đổi.

Mục tiêu bài học:

• Hiểu các cơ chế Data Binding trong Angular.
• Áp dụng Interpolation, Property Binding, Event Binding để truyền và nhận dữ liệu.
• Sử dụng Two-way Binding để đồng bộ dữ liệu giữa giao diện và Component.

Data Binding

1. Interpolation Binding ({{ }}) – Hiển thị dữ liệu trong Template

Interpolation giúp hiển thị dữ liệu từ Component lên giao diện bằng cách sử dụng dấu {{ }}.

Ví dụ đơn giản:

export class AppComponent {
  userName: string = 'Nguyễn Văn A';
  age: number = 25;
}

<h1>Chào, {{ userName }}!</h1> <!-- Chào, Nguyễn Văn A! -->
<p>Tuổi: {{ age }}</p> <!-- Tuổi: 25 -->

Lưu ý:

• Chỉ dùng để hiển thị biểu thức đơn giản (không dùng cho logic phức tạp).
• Có thể dùng với toán tử, phương thức:

<p>Họ tên viết hoa: {{ userName.toUpperCase() }}</p>
<p>Năm sinh: {{ 2025 - age }}</p>

2. Property Binding ([property]) – Liên kết thuộc tính HTML

Property Binding giúp thiết lập giá trị cho thuộc tính của phần tử HTML bằng cách sử dụng dấu [].

Ví dụ:

export class AppComponent {
  isDisabled: boolean = true;
  imageUrl: string = 'https://angular.io/assets/images/logos/angular/angular.png';
}

<button [disabled]="isDisabled">Bấm vào đây</button> <!-- Nút bị vô hiệu hóa -->
<img [src]="imageUrl" alt="Logo Angular"> <!-- Hiển thị ảnh -->

Lưu ý:

• Chỉ dùng để liên kết thuộc tính HTML, không phải thuộc tính của DOM.
• Không dùng dấu {{ }} trong Property Binding, vì giá trị đã được truyền từ Component.

3. Event Binding ((event)) – Bắt sự kiện từ giao diện

Event Binding giúp lắng nghe sự kiện từ người dùng (click, keyup, input,...) và thực thi phương thức trong Component.

Ví dụ: Bắt sự kiện click

export class AppComponent {
  count: number = 0;

  increaseCount() {
    this.count++;
  }
}

<p>Số lần bấm: {{ count }}</p>
<button (click)="increaseCount()">Tăng</button>

Ví dụ: Lắng nghe input từ người dùng

export class AppComponent {
  userInput: string = '';

  updateInput(event: any) {
    this.userInput = event.target.value;
  }
}

<input (input)="updateInput($event)" placeholder="Nhập tên">
<p>Bạn đã nhập: {{ userInput }}</p>

Lưu ý:

• Event Binding giúp tương tác giữa giao diện và Component.
• Dùng $event để lấy thông tin sự kiện (ví dụ: giá trị nhập vào ô input).

4. Two-way Binding ([(ngModel)]) – Đồng bộ dữ liệu hai chiều

Two-way Binding cho phép giao diện và Component đồng bộ dữ liệu tự động.

Cú pháp:

<input [(ngModel)]="userName">
<p>Tên của bạn: {{ userName }}</p>

Ví dụ thực tế:

export class AppComponent {
  userName: string = 'Nguyễn Văn A';
}

<input [(ngModel)]="userName" placeholder="Nhập tên">
<p>Xin chào, {{ userName }}</p>

Lưu ý:

• [(ngModel)] chỉ hoạt động khi FormsModule được import trong app.module.ts:

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

@NgModule({
  imports: [FormsModule]
})

• Thích hợp cho các biểu mẫu (forms) và xử lý dữ liệu nhập từ người dùng.

Kết luận

Tóm lại:

• Interpolation ({{ }}): Hiển thị dữ liệu từ Component.
• Property Binding ([property]): Cập nhật thuộc tính phần tử HTML.
• Event Binding ((event)): Bắt sự kiện từ người dùng.
• Two-way Binding ([(ngModel)]): Đồng bộ dữ liệu giữa giao diện và Component.