รีแอคทีฟของเงื่อนไขใน Angular

รีแอคทีฟจะทำงานกับเงื่อนไข ngIf เช่นกัน นั่นหมายความว่าเราสามารถ แสดงหรือซ่อนบล็อกได้ขึ้นอยู่กับ สิ่งที่อยู่ในพร็อพเพอร์ตี้ของคลาส

ลองมาทดลองปฏิบัติกัน สมมติว่าเรามี บล็อกต่อไปนี้

<div>
	ข้อความ
</div>

มาแสดงหรือซ่อนมัน ตามเงื่อนไขกัน:

<div *ngIf="isShow">
	ข้อความ
</div>

ตอนนี้มาสร้างปุ่มสองปุ่ม เมื่อคลิก ปุ่มแรกจะแสดงบล็อกของเรา และเมื่อ คลิกปุ่มที่สอง - จะซ่อน:

<button (click)="show()">
	แสดง
</button>
<button (click)="hide()">
	ซ่อน
</button>

มาเพิ่มพร็อพเพอร์ตี้ในคลาสคอมโพเนนต์ ที่จะควบคุมว่าบล็อกแสดงหรือไม่ แสดง:

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

และตอนนี้มาเขียนการนำเอาเมธอด สำหรับแสดงและซ่อนบล็อกของเรา:

export class AppComponent {
	public isShow: boolean = true;
	
	public show(): void {
		this.isShow = true;
	}
	public hide(): void {
		this.isShow = false;
	}
}

สร้างปุ่มที่เมื่อกดจะ สลับบล็อก: แสดงถ้ามันถูกซ่อน, และซ่อนถ้ามันแสดง