Reaktivitas Kondisi di Angular

Reaktivitas juga akan bekerja dengan kondisi ngIf. Ini berarti kita dapat menampilkan atau menyembunyikan blok tergantung pada apa yang terkandung dalam properti kelas.

Mari kita coba dalam praktik. Misalkan kita memiliki blok berikut

<div>
	teks
</div>

Mari kita tampilkan atau sembunyikan berdasarkan kondisi:

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

Sekarang mari buat dua tombol. Saat diklik pada tombol pertama, kita akan menampilkan blok kita, dan saat diklik pada tombol kedua - menyembunyikannya:

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

Mari tambahkan ke kelas komponen properti yang akan mengatur apakah blok ditampilkan atau tidak:

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

Dan sekarang mari tulis implementasi metode kita untuk menampilkan dan menyembunyikan blok:

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

Buat tombol yang ketika ditekan akan mengalihkan blok: menampilkan, jika disembunyikan, dan menyembunyikan, jika ditampilkan.