ไดเร็กทีฟ if ใน Angular

ใน Angular สามารถทำให้แท็ก แสดงหรือซ่อนได้ขึ้นอยู่กับ ค่าของตัวแปร ในการนี้ใช้ ไดเร็กทีฟพิเศษ *ngIf มาดู วิธีการทำงานกับมัน

เริ่มแรกต้องนำเข้าไดเร็กทีฟนี้:

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

และเพิ่มมันในส่วน imports ใน decorator:

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

สมมติว่าตอนนี้เรามีตัวแปรดังต่อไปนี้:

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

มาสร้าง div ที่จะแสดง ถ้าตัวแปรนี้มีค่า true:

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

และตอนนี้ทำให้ div แสดง ถ้าตัวแปรของเรามีค่า false:

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

สร้างคุณสมบัติ isAdult แสดง ข้อความสำหรับผู้ใหญ่ ถ้าในตัวแปรของเรา เก็บค่า true