Reaktivnost uslova u Angularu

Reaktivnost će takođe raditi sa uslovima ngIf. To znači da možemo prikazati ili sakriti blok u zavisnosti od onoga što je sadržano u svojstvu klase.

Hajde da probamo u praksi. Neka imamo sledeći blok

<div>
	text
</div>

Hajde da ga prikazujemo ili skrivamo po uslovu:

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

Napravimo sada dva dugmeta. Klikom na prvo ćemo prikazati naš blok, a klikom na drugo - sakriti ga:

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

Dodajmo u klasu komponente svojstvo koje će regulisati da li je blok prikazan ili nije:

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

A sada napišimo implementaciju naših metoda za prikaz i sakrivanje bloka:

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

Napravite dugme čijim pritiskom će se blok paliti/gasiti: prikazivati ako je sakriven, i skrivati ako je prikazan.