Lập trình Angular - Bài 3: Data binding

Data binding

Data binding là một kỹ thuật được dùng để đồng bộ dữ liệu giữa component và view. Bắt cứ khi nào người dùng cập nhật data trong view, Angular sẽ cập nhật component. Khi component nhận được dữ liệu mới, Angular sẽ cập nhật view.

Data binding trong Angular có thể được phân thành hai nhóm.

1. Ràng buộc một chiều (One way binding): dữ liệu chạy theo 1 hướng. Từ Component sang View hoặc từ View sang Component.
2. Ràng buộc hai chiều (Two-way binding): hữu dụng trong các form nhập dữ liệu. Cập nhật dữ liệu được truyền từ Component sang View và bất cứ khi nào user thực hiện sự kiện thay đổi trên View sẽ cập nhật dữ liệu cho Component.

1. Angular structure:

2. Angular structure: ==> interpolation: {{ expression }}

• Ví dụ: Trong file *.component.ts

                      user = {
                          name: "KenjiNguyen",
                          age: 23,
                      };
  
                      showInfo() {
                          alert("You have clicked on button!");
                      }
                  

• Trong file *.component.html
  • One way binding: from Component to View
  • Interpolation - {{ templateExpression }}:
    

    Your name: {{ user.name }}

  • Property binding - [property]="expression" - [property]="'string'":
    

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

  • One way binding: from View to Component
  • Event binding - (event)="function()": dạng này sẽ kích hoạt event (keystroke, clicks, hover, touch,...) từ view sang component

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

  • Two-way binding - [(property)]:
    • Trong thực tế two-way binding chính là kết hợp của binding dữ liệu từ class (Component) ra template (View) thông qua property binding, và từ template (View) vào class (Component) thông qua event binding:

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

    • Để sử dụng ngModel bạn cần import FormsModule từ '@angular/forms', nhưng trong bài này chúng ta chỉ cần hiểu, nó là cách viết tắt của dạng tương ứng là:

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

Khi bạn bind ngModel directive, nó sẽ thiết lập property binding và event binding. Nó sử dụng ngModel trong property để bind value property của element sử dụng property binding. Sau đó, nó sử dụng ngModelChange event thiêt lập event binding để lắng nghe những thay đổi của value.

Custom Two-way binding

Ví dụ: Bạn muốn sử dụng two-way binding cho thuộc tính name của CardComponent có selector là app-card như sau:

<app-card [(name)]="'Profile'"></app-card>

Để custom two-way binding, trong component CardComponent thực hiện các bước sau:

1. Khai báo input property với tên name:
   

   @Input() name: string = '';

2. Khai báo output property đặt với cú pháp: <input-property-name>Change
   

   @Output() nameChange: EventEmitter<string> = new EventEmitter<string>();

Reference

• Data Binding in Angular