Angular ngSwitch Directive
ngSwitch là một chỉ thị cấu trúc của Angular, cho phép chúng ta hiển thị một hoặc nhiều phần tử DOM dựa trên một số điều kiện được xác định trước. Nó hoạt động cùng với các chỉ thị ngSwitchcase, & ngSwitchDefault.
Syntax
<container_element [ngSwitch]="switch_expression">
<inner_element *ngSwitchCase="match_expresson_1">...</inner_element>
<inner_element *ngSwitchCase="match_expresson_2">...</inner_element>
<inner_element *ngSwitchCase="match_expresson_3">...</inner_element>
<inner_element *ngSwitchDefault>...</element>
</container_element>
Những điểm quan trọng:
- Bạn phải đặt ngSwitchCase & ngSwitchDefault bên trong chỉ thị ngSwitch
- Angular hiển thị mọi phần tử khớp (match) với switch_expression
- Nếu không có kết quả phù hợp nào, Angular sẽ hiển thị tất cả các phần tử có chỉ thị ngSwitchDefault. Lưu ý: ngSwitchDefault không nhận bất kỳ biểu thức (expression) nào.
- Bạn có thể đặt một hoặc nhiều ngSwitchDefault ở bất kỳ đâu bên trong container_element và không nhất thiết phải ở dưới cùng.
- Bất kỳ phần tử nào trong câu lệnh ngSwitch nhưng bên ngoài bất kỳ chỉ thị ngSwitchCase hoặc ngSwitchDefault nào cũng được hiển thị như nó vốn có (theo đúng vị trí mà nó đã được chỉ định).
- Các phần tử có giá trị ngSwitchCase không khớp với switch_expression không bị ẩn mà bị xóa khỏi DOM. Nó render trên DOM một comment thay thế dạng:
<!--bindings={
"ng-reflect-ng-switch-case": "2"
}--> - Chúng ta có thể sử dụng ngSwitchCase với cú pháp property binding sử dụng ng-template. Thực tế, <div *ngSwitchCase="'One'"></div> là viết tắt của <ng-template [ngSwitchCase]="'One'"></ng-template>.
<ng-template [ngSwitchCase]="'Two'">Two is Selected</ng-template>
<ng-template ngSwitchDefault>This is Default</ng-template> - Angular sử dụng loose equality checks (tạm dịch là: kiểm tra bình đẳng lỏng lẻo) để so sánh biểu thức ngSwitchCase với biểu thức ngSwitch. Điều này có nghĩa là chuỗi rỗng "" khớp (match) với 0 (number).
- Bạn có thể chia sẻ template giữa nhiều ngSwitchCase bằng ngTemplateOutlet
Example Code
Tạo 1 biến num trong component class:
num: number = 0;
Template:
<div class='card'>
<div class='card-header'>
ngSwitch Example
</div>
<div class="card-body">
Input string : <input type='text' [(ngModel)]="num" />
<div [ngSwitch]="num">
<div *ngSwitchCase="0">Loose Equality Checks - the empty string "" matches 0</div> <!-- Case 8 -->
<div *ngSwitchCase="'0'" [style.color]="'blue'">0 match '0' but the empty string "" don't matches 0</div>
<div *ngSwitchCase="'1'">One</div>
<div [style.color]="'red'">
This element is placed Inside ngSwitch but Outside ngSwitchCase and ngSwitchDefault.
</div> <!-- Case 5 -->
<div *ngSwitchCase="'2'">Two</div> <!-- Case 2 -->
<div *ngSwitchCase="'2'">Two (1)</div> <!-- Case 2 -->
<div *ngSwitchCase="'3'">Three</div>
<div *ngSwitchDefault>This is Default with ngSwitchDefault placed anywhere</div> <!-- Case 4 -->
<div *ngSwitchCase="'2'">Two (2)</div> <!-- Case 2 -->
<ng-template [ngSwitchCase]="'4'">Four</ng-template>
<ng-template [ngSwitchDefault]>This is default value with property binding syntax</ng-template>
<div *ngSwitchCase="'5'">Five</div>
<div *ngSwitchDefault>This is Default with ngSwitchDefault bottom</div> <!-- Case 3 -->
</div>
</div>
</div>
Stackblitz:
Multiple / Sharing ngSwitchCase
Trong một số trường hợp, chúng ta sẽ cần sử dụng 1 template cho nhiều giá trị ngSwitchCase khác nhau. Thay vì lặp lại template cho các giá trị đó bằng cách copy & paste, chúng ta có thể sử dụng ngTemplateOutlet để chia sẻ template và tránh phải lặp code một cách không cần thiết là ảnh hưởng đến performance:
Reference
Tags:
angular