Reaktivnost pogojev v Angular

Reaktivnost bo delovala tudi s pogoji ngIf. To pomeni, da lahko prikažemo ali skrijemo blok, odvisno od tega, kaj vsebuje lastnost razreda.

Poskusimo v praksi. Naj imamo naslednji blok

<div>
	text
</div>

Prikazujmo ali skrivajmo ga glede na pogoj:

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

Naredimo zdaj dva gumba. Ob kliku na prvega bomo prikazali naš blok, ob kliku na drugega pa skrili:

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

Dodajmo v razred komponente lastnost, ki bo uravnavala, ali je blok prikazan ali ne:

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

In zdaj napišimo implementacijo naših metod za prikaz in skrivanje bloka:

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

Naredite gumb, katerega pritisk bo preklopil blok: prikazal ga, če je skrit, in skril, če je prikazan.