Kereaktifan Kondisi dalam Angular

Kereaktifan juga akan berfungsi dengan kondisi ngIf. Ini bermakna kita boleh menunjukkan atau menyembunyikan blok bergantung pada apa yang terkandung dalam sifat kelas.

Mari kita cuba secara praktikal. Katakan kita mempunyai blok berikut

<div>
	text
</div>

Mari kita tunjukkan atau sembunyikannya mengikut kondisi:

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

Sekarang mari buat dua butang. Apabila diklik pada butang pertama, kita akan menunjukkan blok kita, dan apabila diklik pada butang kedua - menyembunyikannya:

<button (click)="show()">
	tunjukkan
</button>
<button (click)="hide()">
	sembunyikan
</button>

Mari tambahkan dalam kelas komponen satu sifat yang akan mengawal sama ada blok ditunjukkan atau tidak:

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

Dan sekarang mari tulis pelaksanaan kaedah kita untuk menunjukkan dan menyembunyikan blok:

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

Buat satu butang, klik padanya akan mengotogel blok: menunjukkannya jika ia disembunyikan, dan menyembunyikannya jika ia ditunjukkan.