Trong phần này chúng ta tiếp tục tìm hiểu về template trong Angular.

Bắt thuộc tính […]

Bắt thuộc tính ở đây là chúng ta gán thuộc tính của một element/thẻ cho một biểu thức của template. Khi bắt thuộc tính thì chúng ta bọc tên thuộc tính trong cặp thẻ ngoặc vuông [].

Thông thường chúng ta gán thuộc tính đó cho một giá trị nào đó trong lớp component.

<img [src]="customerUrl">

Chẳng hạn như trong đoạn code trên, chúng ta gán thuộc tính src của element <img> là giá trị của thuộc tính customerUrl, customerUrl là thuộc tính của một lớp component nào đó.

<button [disabled]="isUnchanged">Cancel is disabled</button>

Hoặc chúng ta gán thuộc tính disabled là giá trị của thuộc tính isUnchanged.

<customer [cust]="currentCustomer"></customer>

Thuộc tính đó cũng có thể là một đối tượng chứ không phải là các giá trị đơn lẻ như số, chuỗi…v.v

Lưu ý:

• Việc kết nối giá trị từ template vô lớp component là một chiều, chúng ta không thể thay đổi giá trị của thuộc tính thông qua việc bắt thuộc tính
• Không thể gán giá trị cho thuộc tính là một phương thức
• Nếu element có phát sinh sự kiện thì chúng ta có thể bắt sự kiện (chúng ta sẽ tìm hiểu sau)

Ngoài việc bọc tên thuộc tính trong cặp dấu ngoặc vuông [], thì chúng ta có thể nối vào đầu tên thuộc tính tiền tố bind-, ví dụ 2 đoạn code dưới đây là giống nhau:

<img [src]="customerUrl">
<img bind-src="customerUrl">

Bạn có thể dùng 1 trong 2 cách trên đều được.

Cú pháp bắt thuộc tính này cũng giống như cú pháp {{...}} vậy, 2 đoạn code dưới đây là tương đương nhau:

<img src="{{customerUrl}}">
<img [src]="customerUrl">

Việc dùng cú pháp nào là tùy ở bạn, bạn thấy thích dùng cái gì thì dùng.

Bắt sự kiện (…)

Bắt thuộc tính là lấy dữ liệu từ lớp component truyền lên template, bắt sự kiện thì ngược lại là phát sinh dữ liệu từ template và truyền về lớp component.

Sự kiện là những hành động như nhập chữ vào ôn các ô input, click chuột, chọn item từ một danh sách.

Cách duy nhất để biết sự kiện gì vừa xảy ra là lắng nghe sự kiện đó – hay bắt sự kiện đó.

Cú pháp bắt sự kiện bao gồm tên sự kiện được bọc trong cặp dấu ngoặc tròn (), dấu bằng =, và cuối cùng là một câu lệnh nằm trong cặp dấu nháy kép "". Ví dụ:

<button (click)="onSave()">Save</button>

Trong đoạn code trên, chúng ta lắng nghe sự kiện (click), tức là click chuột, khi người dùng click chuột vào button thì sự kiện sẽ xảy ra, và câu lệnh ở bên phải sẽ được thực thi, ở đây là lời gọi hàm onSave().

Ngoài việc bọc tên sự kiện trong cặp dấu ngoặc tròn thì chúng ta có thể chèn trước tên sự kiện tiền tố on-, ví dụ 2 đoạn code dưới đây là giống nhau:

<button (click)="onSave()">Save</button>
<button on-click="onSave()">On Save</button>

Khi sự kiện xảy ra, Angular sẽ thực thi câu lệnh trong dấu nháy kép, ngoài ra Angular còn truyền thêm dữ liệu đi kèm nữa, các dữ liệu đó sẽ được nằm trong một đối tượng có tên là $event. 

 
<button (click)="onSave($event)">Save</button> 

Đối tượng này chứa những gì tùy thuộc vào loại sự kiện, nếu sự kiện xảy ra là các sự kiện thông thường trong HTML, mà người ta hay gọi là sự kiện DOM, thì $event sẽ chứa những gì mà chuẩn DOM quy định, chẳng hạn như target, target.value...v.v Bạn có thể xem các sự kiện DOM của đây:

https://developer.mozilla.org/en-US/docs/Web/Events 

Bắt dữ liệu 2 chiều [(…)]

Đây là cú pháp cho phép bạn vừa có thể lấy dữ liệu từ component, vừa có thể chỉnh sửa dữ liệu đó từ template.

Để làm việc này thì chúng ta bọc thuộc tính của element trong cặp dấu [()]. Lưu ý là dấu ngoặc tròn () bao giờ cũng nằm trong dấu ngoặc vuông []. Ví dụ:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: ` 
        <input [(ngModel)]="username"> 
        

Hello {{username}}

    `,
})
export class AppComponent { 
    username = "";
}

Lớp AppComponent có một thuộc tính là username. Thuộc tính ngModel có giá trị là giá trị của thuộc tính username, khi người dùng thay đổi nội dung trong element <input> thì giá trị của ngModel cũng được thay đổi theo.