Data Binding trong Angular

18-12-2023
Toanngo92
0 Comments

Data Binding trong Angular là khả năng liên kết dữ liệu giữa thành phần TypeScript (TS) và template để hiển thị thông tin cho người dùng. Trong Angular, một component được tạo ra từ một class TypeScript và đi kèm với một decorator để định nghĩa template.

Có nhiều cách để hiển thị dữ liệu trong template, một trong số đó là sử dụng interpolation, được biểu diễn bằng cặp dấu nháy kép {{ expression }}. Khi Angular gặp cú pháp này, nó sẽ tính toán expression và hiển thị kết quả ra template tại vị trí của cặp dấu nháy kép.

Ví dụ, bạn có thể hiển thị thông tin về tên và tuổi của một người trong một profile đơn giản như sau:

import { Component } from "@angular/core";

@Component({
  selector: "app-hello",
  template: `
    <h2>Hello there!</h2>
    <h3>Your name: {{ user.name }}</h3>
    <p>Your age: {{ user.age }}</p>
  `,
})
export class HelloComponent {
  user = {
    name: "John Doe",
    age: 29,
  };
}

Mục lục

Property binding trong Angular

Property binding trong Angular là quá trình liên kết dữ liệu giữa các thuộc tính của các thành phần HTML hoặc components và dữ liệu từ class TypeScript của Angular. Điều này cho phép chúng ta thay đổi các thuộc tính này dựa trên dữ liệu từ phía TypeScript một cách linh hoạt và tự động, mà không cần phải thao tác trực tiếp trên DOM.

Khi làm việc với DOM, có sự phân biệt giữa các thuộc tính (properties) và các thuộc tính HTML (attributes). Mỗi thành phần HTML được parse từ mã nguồn sẽ tạo ra một object node, trong đó attributes là thông tin được đặt trong phần opening tag của một element, trong khi properties là thông tin của object node tương ứng. Một số attribute được map sang properties (ví dụ: type và value), nhưng không phải tất cả đều có quan hệ 1-1.

Trong Angular, property binding cho phép chúng ta cập nhật các properties của DOM một cách linh hoạt thông qua việc sử dụng cú pháp [property]="expression" trong template. Ví dụ, nếu bạn muốn gắn giá trị tên người dùng vào thuộc tính value của một input, bạn có thể sử dụng property binding như sau:

<input type="text" [value]="user.name" />

Trong đoạn mã trên, [value]="user.name" có nghĩa là Angular sẽ binding giá trị của thuộc tính value của input với giá trị name trong object user. Khi dữ liệu trong class TypeScript thay đổi, Angular sẽ tự động cập nhật giá trị của thuộc tính này trong template mà không cần phải can thiệp trực tiếp vào DOM.

Lưu ý: Ngoài property binding cũng có thể được áp dụng cho các component, cho phép chúng ta cũng có thể liên kết dữ liệu giữa các thành phần HTML và các thành phần Angular components.

Event binding trong Angular

Event binding trong Angular là cách liên kết các sự kiện (events) từ các thành phần HTML hoặc components với các phương thức xử lý sự kiện trong class TypeScript của Angular. Điều này cho phép chúng ta phản ứng với các sự kiện người dùng như click, hover, change, và thực hiện các hành động tương ứng khi sự kiện đó xảy ra.

Trong Angular, chúng ta có thể áp dụng event binding bằng cách sử dụng cú pháp ngoặc đơn () để gắn các sự kiện vào các phần tử trong template. Ví dụ, nếu bạn muốn thực hiện một hành động khi người dùng click vào một button, bạn có thể sử dụng event binding như sau:

@Component({
  selector: "app-hello",
  template: `
    <h2>Hello there!</h2>
    <button (click)="showInfo()">Click me!</button>
  `,
})
export class HelloComponent {
  showInfo() {
    alert("Inside Angular Component method");
  }
}

Trong ví dụ này, khi người dùng click vào button, sự kiện click sẽ kích hoạt phương thức showInfo() trong class HelloComponent. Điều này cho phép bạn xử lý các sự kiện người dùng một cách dễ dàng và linh hoạt mà không cần phải sử dụng các phương thức truyền thống như addEventListener.

Cú pháp (click)="showInfo()" trong template tương đương với việc sử dụng onclick="showInfo()" trong HTML thông thường. Tuy nhiên, việc sử dụng event binding của Angular giúp tách biệt logic xử lý sự kiện ra khỏi template, làm cho mã nguồn trở nên sáng sủa hơn và dễ bảo trì hơn.

Two-way binding trong Angular

Two-way binding trong Angular là một cơ chế giúp liên kết dữ liệu (data binding) giữa template và class một cách hai chiều, cho phép dữ liệu được đồng bộ hóa cả khi thay đổi ở template hoặc class.

Cú pháp Two-way binding thường được thực hiện thông qua directive ngModel. Nó giúp tự động đồng bộ dữ liệu giữa trường input trong template và thuộc tính tương ứng trong class.

Ví dụ, khi bạn có một trường input với ngModel như sau:

<input type="text" [(ngModel)]="user.name" />