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

Structural directive

Các chỉ thị thuộc loại structural chịu trách nhiệm điều khiển cách dữ liệu được hiển thị, chẳng hạn như thêm, bớt, chỉnh sửa các element…v.v Ở đây chúng ta chỉ tìm hiểu 3 chỉ thị thường dùng là ngIf, ngFor và ngSwitch.

Nếu bạn để ý thì có thể nhận thấy chức năng của 3 chỉ thị này giống với các câu lệnh if, for, switch trong các ngôn ngữ lập trình.

ngIf

Chỉ thị ngIf cho phép chúng ta thêm hoặc loại bỏ một element ra khỏi trang, chúng ta gán giá trị cho chỉ thị này là một biểu thức nào đó có trả về giá trị true hoặc false, nếu biểu thức trả về true thì element sẽ hiện ra, ngược lại thì không.

<customer *ngIf="isActive"></customer>

Trong đoan code trên, element <customer> sẽ được hiển thị nếu isActive trả về true, isActive có thể là một thuộc tính/biến nào đó hoặc một phương thức…v.v

Lưu ý luôn phải có dấu sao * trước ngIf.

Một điều khác là ở đây ngIf thêm hoặc bỏ element trong trang web, chứ không phải là ẩn hay hiện element đó, tức là khác với thuộc tính hidden của các element trong HTML.

Thông thường chúng ta dùng ngIf để kiểm tra xem một đối tượng nào đó có NULL hay không

<div *ngIf="currentCustomer">Hello, {{currentCustomer.name}}</div>
<div *ngIf="nullCustomer">Hello, {{customer.name}}</div>

ngFor

Đây là chỉ thị lặp, có tác dụng lặp qua một danh sách các phần tử, khi chúng ta có một danh sách các phần tử, muốn hiển thị chúng lên trang web thì chúng ta lặp qua danh sách đó và hiển thị các phần tử theo một khuôn mẫu giống nhau. Ví dụ:

<div *ngFor="let cus of customers">
    {{cus.name}}
</div>

Giá trị của ngFor là một câu lệnh có cú pháp như sau:

let <biến lặp> of <danh sách>

Biến lặp là do chúng ta tự đặt, bạn muốn đặt là gì cũng được, ngFor sẽ lặp qua danh sách và mỗi lần lặp thì chúng ta dùng biến lặp để lấy dữ liệu của phần tử hiện tại trong danh sách.

Lưu ý luôn phải có dấu sao * trước ngFor. 

Trong ngFor có một thuộc tính tên là index, thuộc tính này lưu trữ số thứ tự của phần tử đang được lặp, chúng ta có thể lấy số thứ tự giá trị index này như sau:

<div *ngFor="let cus of customers; let i=index">{{i + 1}} : {{cus.name}}</div>

ngSwitch

Chỉ thị ngSwitch cũng tương tự như câu lệnh switch trong Javascript vậy, chỉ thị này có tác dụng hiển thị một element trong một danh sách các element, dựa vào một điều kiện cho trước.

Trong ngSwitch lại có 2 chỉ thị khác nữa là ngSwitchCase và ngSwitchDefault.

<div [ngSwitch]="currentCustomer.emotion">
    <happy-customer   *ngSwitchCase="'happy'"    [cus]="currentCustomer"></happy-customer>
    <sad-customer     *ngSwitchCase="'sad'"      [cus]="currentCustomer"></sad-customer>
    <confused-custoer *ngSwitchCase="'confused'" [cus]="currentCustomer"></confused-customer>
    <unknown-customer *ngSwitchDefault           [cus]="currentCustomer"></unknown-customer>
</div>

Trong đoạn code trên, ngSwitch được gán bằng giá trị của thuộc tính emotion trong đối tượng currentCustomer, thuộc tính emotion có thể là bất cứ giá trị gì, trong trường hợp này thì đây là một string “happy”, “sad” hoặc “confused”, sau đó bên trong ngSwitch, chúng ta có các element có chỉ thị ngSwitchCase, mỗi chỉ thị ngSwitchCase này được gán giá trị là một chuỗi trùng với thuộc tính emotion, nếu element nào có chỉ thị ngSwitchCase trùng với giá trị của thuộc tính emotion thì element đó được đưa vào trang web, các element còn lại thì không. Nếu không có ngSwitchCase nào trùng thì element có chỉ thị ngSwitchDefault sẽ được đưa vào.

Lưu ý là ngSwitch là một chỉ thị attribute, vì chỉ thị này không trực tiếp chỉnh sửa giao diện, do đó chúng ta không thêm dấu sao * mà bọc trong cặp dấu ngoặc vuông [], còn các chỉ thị ngSwitchCase và ngSwitchDefault thì cần có dấu sao * phía trước.