Data Binding

Data binding là cơ chế đồng bộ dữ liệu giữa model và view, để hiểu rõ hơn về phần này chúng ta cần làm rõ các khai niệm bên dưới.

HTML attributes và DOM properties

HTML attributes hiểu đơn giản là các thuộc tính của một phần tử trên trang web, chúng ta có thể nhìn thấy và thao tác trực tiếp bằng việc inspect element trên Chrome. Trong một vài trường hợp, dù đã thay đổi giá trị attribute nhưng chúng ta vẫn thấy hiển thị của phần tử đó trên màn hình không có gì thay đổi cả. Xem ví dụ dưới đây:

<input type="text" value="LamDN">

Ban đầu attribute value được set giá trị là LamDN, chúng ta thấy trên màn hình hiển thị giá trị tương ứng. Khi chúng ta nhập vào một giá trị mới là Angular và kiểm tra lại bằng inspect element hoặc sử dụng input.getAttribute('value') thì sẽ thấy value của input không hề thay đổi và vẫn là LamDN.

Từ đây chúng ta có thể thấy, thuộc tính của một element không phải lúc nào cũng phản ánh đúng giá trị hiện tại của nó. Thứ phản ánh giá trị hiện tại của một HTML attributes chính là DOM properties.

Khác với HTML attributes - chỉ đọc, DOM properties cho phép chúng ta có thể đọc và ghi. Trong Angular chúng ta chỉ thao tác trên DOM properties, HTML attributes chỉ có một nhiệm vụ duy nhất là init dữ liệu.

Binding Types

Angular hỗ trợ 3 cách binding dữ liệu:

• From source to view (one way), sử dụng cú pháp []:

  ​​<input [disabled]="isDisabled">
  ​​
  ​​<user-info [user]="user"></user-info>
  

• From view to source (one way), sử dụng cú pháp ():

  ​​<button type="button" (click)="onSave()"></button>
  ​​
  ​​<user-info (onDelete)="deleteUser()"></user-info>
  

• View to source to view (two way), sử dụng kết hợp [()]:

  ​​<input [(ngModel)]="name">
  

Target của data binding bao gồm attributes, properties hay events.