ngIf
ngIf là một Structural Directive giúp thêm hoặc xóa element dựa vào một số điều kiện.
<div *ngIf="expression">...</div>
expression là biểu thức điều kiện và nó phải trả về giá trị true hoặc false. true thì hiển thị, false thì không hiển thị.
Sự khác biệt giữa hidden attribute và ngIf
hidden attribute syntax:
<p [hidden]="condition">Content to render, when the condition is false</p>
Sự khác giữa hidden attribute và ngIf:
- hidden atrribute chỉ thêm hidden attribute vào element và tạm thời ẩn đi element chứ không xóa element khỏi DOM.
- ngIf loại bỏ toàn bộ element cùng với các phần element con của nó ra khỏi DOM. Nó cũng loại bỏ trạng thái tương ứng giải phóng các tài nguyên được gắn vào element.
Bằng cách sử dụng Logical NOT (!), bạn có thể bắt chước điều kiện else như sau:
<p *ngIf="!condition">Content to render, when the condition is false</p>
Giải pháp tốt hơn cho vấn đề này là sử dụng khối else tùy chọn, chúng ta sẽ được tìm hiểu ngay sau đây.
ngIf - else
ngIf cho phép chúng ta xác định khối else tùy chọn bằng cách sử dụng ng-template.
- Tag ng-template là một tag được cung cấp bởi Angular, nó sẽ lưu trữ một Template được định nghĩa bên trong cặp thẻ mở/đóng của nó. Những gì được định nghĩa bên trong đó sẽ không được hiển thị ra view, nhưng chúng ta có thể sử dụng Template đó để render bằng code.
- ng-template sẽ tạo ra một element <!--container--> để chỉ định vị trí sẽ hiển thị elements bên trong ng-template nếu thỏa điều khối của khối else.
<div *ngIf="condition; else elseBlock">Content to render when the condition is true.</div><ng-template #elseBlock><div>Content to render when condition is false.</div></ng-template>
- Biểu thức trong dấu ngoặc kép của ngIf bắt đầu với một điều kiện theo sau là dấu chấm phẩy.
- Tiếp theo, chúng ta có mệnh đề else ràng buộc với một template có tên elseBlock. template có thể được xác định ở bất kỳ đâu bằng cách sử dụng ng-template. Đặt nó ngay sau ngIf để dễ đọc.
- Khi condition trả về true, nội dụng trong khối chứa ngIf sẽ hiển thị. Nếu false, ng-template với tên #elseBlock sẽ được render bởi ngIf Directive.
<ng-template [ngIf]="condition" [ngIfElse]="elseBlock">Content to render when the condition is true.</ng-template><ng-template #elseBlock><div>Content to render when condition is false.</div></ng-template>
ngIf - then - else
Chúng ta có thể xác định khối then else bằng cách sử dụng ng-template.
<div *ngIf="1 === 1; then thenBlock else elseBlock">
This content is not shown
</div>
<ng-template #thenBlock>
Content to render when the condition is true.
</ng-template>
<ng-template #elseBlock>
Content to render when condition is false.
</ng-template>
- Ở đây, chúng ta có mệnh đề then được theo sau bởi một template có tên thenBlock.
- Khi condition là true, template với tên thenBlock sẽ được hiển thị. Nếu false, thì template với tên elseBlock được hiển thị. Nội dụng bên trong khối chứa ngIf sẽ không được hiển thị.
Code trên có thể viết lại thành:
<div [ngIf]="1 === 1" [ngIfThen]="thenBlock" [ngIfElse]="elseBlock">
This content is not shown
</div>
<ng-template #thenBlock>
Content to render when the condition is true.
</ng-template>
<ng-template #elseBlock>
Content to render when condition is false.
</ng-template>
Reference
Tags:
angular