Giải thích interpolation, property binding và event binding trong template Angular

Ba loại binding này nối class của component với template.

• Interpolation {{ expression }} render một giá trị dưới dạng text.
• Property binding [property]="expression" gán cho một property của DOM hoặc một input của component.
• Event binding (event)="handler()" lắng nghe một sự kiện DOM hoặc một output của component.

<h1>{{ title }}</h1>
<img [src]="imageUrl" [alt]="title" />
<button (click)="save($event)" [disabled]="saving">Save</button>

title = 'Profile'
imageUrl = '/avatar.png'
saving = false

save(event: MouseEvent) {
  this.saving = true
}

Lưu ý:

• $event là object sự kiện, hoặc giá trị mà một output phát ra.
• Bind vào property khác với attribute của HTML. Với attribute không có property tương ứng, như ARIA, dùng [attr.aria-label]="label".
• Kết hợp property và event cho ra two-way binding, viết là [(ngModel)].
• Biểu thức phải đơn giản và không có side effect, vì Angular đánh giá chúng thường xuyên.

Dùng ngoặc vuông để đẩy dữ liệu vào và ngoặc tròn để lắng nghe sự kiện.