Data Binding trong Angular

Hãy thử tưởng tượng rằng công ty X có nhân viên A, người này có vợ là chị B. Bằng một cách nào đó, cứ đến kỳ chuyển lương thì chị B sẽ nhận được thông báo trên điện thoại rằng số tiền trong tài khoản của anh A đã được công ty X trả Y triệu. Tương tự như vậy, trong lập trình, khi chúng ta có data D thuộc object O và data G thuộc object OP, mỗi khi data D thay đổi, G cũng sẽ biết sự thay đổi và thay đổi theo. Đó là một dạng của data binding.

Trong Angular, nhiệm vụ đồng bộ các dữ liệu bị ràng buộc đã được thực hiện sẵn. Chúng ta chỉ cần cập nhật data/state cần thiết. Vậy có những dạng data binding nào?

Data Binding trong Angular là gì?

Nhớ lại, một component trong Angular chỉ là một TypeScript (TS) class thông thường, và nó đi kèm với một decorator để gắn thêm meta-data như template mà nó định nghĩa. Như vậy, TS class và template này hoàn toàn không biết đến nhau, mà chúng sẽ được Angular xử lý để gắn kết chúng lại. Làm thế nào để hiển thị một dữ liệu nào đó? Đây là nơi tỏa sáng của cặp đôi hoàn cảnh (interpolation) {{ expression }}.

Interpolation tính toán expression và hiển thị kết quả ở vị trí dấu {{}}. Ví dụ:

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: "Tiep Phan",
    age: 30,
  };
}

Property Binding trong Angular là gì?

Một số tag yêu cầu truyền data vào một property. Trong DOM, có hai khái niệm khác nhau là property và attribute. Khi browser load trang web, nó parse HTML và xây dựng cây Document Object Model (DOM) để biểu diễn HTML, cho phép tương tác với HTML bằng JavaScript.

Giả sử bạn có phần HTML:

<input type="text" value="something" />

Sau khi parse xong, sẽ có một object (node) thuộc type HTMLInputElement được tạo ra với attribute type="text" và value="something". Mỗi tag HTML có thể có nhiều attribute khác. Object được tạo ra sẽ có dạng:

obj = {
  type: "text",
  value: "something",
  attributes: [], // thuộc type NamedNodeMap, dạng như một array
  // … các thuộc tính, method khác
};

Attribute được dùng để chỉ những gì bạn đặt vào opening tag của một tag, còn lại là property của object (node). Trong Angular, bạn có thể cập nhật các properties của DOM bằng property binding:

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

Ví dụ trên binding từ TS class ra ngoài template, và khi dữ liệu ở class thay đổi, Angular sẽ tự động cập nhật template.

Event Binding trong Angular là gì?

JavaScript sử dụng rất nhiều đến khái niệm event. Khi một điều gì đó xảy ra, chúng ta muốn thực hiện một số task. Ví dụ, khi người dùng click vào button, chúng ta muốn hiển thị alert. Angular cung cấp event binding để gắn event listener vào phần tử trên template:

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

Sử dụng event binding trong Angular khá giống với việc sử dụng inline event listener trong HTML:

<button onclick="showInfo()">Click me!</button>

Two-Way Binding trong Angular là gì?

Two-way binding là kết hợp của property binding và event binding, sử dụng cú pháp ngắn gọn:

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

Để sử dụng ngModel, bạn cần import FormsModule. Cú pháp ngắn gọn này tương đương với:

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

Trong bài khác khác, chúng ta sẽ tìm hiểu thêm về Two-way binding và Custom Two-way binding.