Directive if trong Angular

Trong Angular, bạn có thể làm cho một thẻ hiển thị hoặc ẩn đi tùy thuộc vào giá trị của một biến. Để làm điều này, người ta sử dụng directive đặc biệt *ngIf. Hãy cùng xem cách làm việc với nó.

Đầu tiên, directive này cần được import:

import {NgIf} from "@angular/common";

Và thêm nó vào phần imports trong decorator:

@Component({
	.....
	imports: [....., NgIf],
	....
})

Bây giờ, giả sử chúng ta có biến sau:

export class AppComponent {
	public isAdmin: boolean = true;
}

Hãy tạo một div sẽ được hiển thị nếu biến này có giá trị true:

<div *ngIf="isAdmin">
	text
</div>

Và bây giờ, hãy làm sao cho div được hiển thị nếu biến của chúng ta có giá trị false:

<div *ngIf="!isAdmin">
	text
</div>

Hãy tạo thuộc tính isAdult. Hiển thị văn bản dành cho người lớn nếu biến của chúng ta mang giá trị true.