Data binding kết nối class của một component với template của nó. Angular có bốn dạng, được phân biệt bởi hướng luồng dữ liệu và cú pháp đặc trưng của chúng.
1. Interpolation — class → view (văn bản)
html
{{ title }}
{{ price * quantity }}
Data binding kết nối class của một component với template của nó. Angular có bốn dạng, được phân biệt bởi hướng luồng dữ liệu và cú pháp đặc trưng của chúng.
{{ title }}
{{ price * quantity }}
<img [src]="imageUrl" /> <!-- bind một property của DOM -->
<button [disabled]="isLoading">Save</button>
<app-child [user]="currentUser"></app-child> <!-- truyền vào @Input của component -->
Dấu ngoặc vuông [ ] bind một property tới một biểu thức (một chiều, dữ liệu chảy xuống vào view).
<button (click)="save()">Save</button> <!-- sự kiện DOM → phương thức -->
<input (input)="onInput($event)" /> <!-- $event = đối tượng sự kiện -->
<app-child (deleted)="onDeleted($event)"></app-child> <!-- @Output của component -->
Dấu ngoặc đơn ( ) lắng nghe các sự kiện (một chiều, dữ liệu chảy lên từ view tới class).
<input [(ngModel)]="name" /> <!-- "banana in a box" [()] -->
<p>{{ name }}</p> <!-- đồng bộ khi bạn gõ -->
Cú pháp [(...)] ("banana in a box") kết hợp property binding + event binding để đồng bộ hai chiều — phổ biến nhất là với ngModel trên các input của form.
{{ }} → interpolation (class → view, văn bản)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (cả hai) — thực chất là [ ] + ( )
Two-way [()] chỉ là property binding [] cộng với event binding () được kết hợp lại — các dấu ngoặc thể hiện các hướng.
Data binding là cách Angular giữ cho class và template đồng bộ — nó là cơ chế đằng sau mọi UI động.
Biết bốn kiểu và cú pháp của chúng ({{}}, [], (), [()]) cùng hướng chảy của mỗi loại là điều thiết yếu để đọc và viết bất kỳ template Angular nào; gần như mỗi dòng của một template Angular đều dùng một trong số chúng.