Reaktivita podmienok v Angular

Reaktivita bude fungovať aj s podmienkami ngIf. To znamená, že môžeme zobrazovať alebo skrývať blok v závislosti od toho, čo je obsiahnuté vo vlastnosti triedy.

Vyskúšajme si to v praxi. Nech máme nasledujúci blok

<div>
	text
</div>

Zobrazujme alebo skrývajme ho podľa podmienky:

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

Vytvorme teraz dva tlačidlá. Kliknutím na prvé zobrazíme náš blok a kliknutím na druhé - skryjeme:

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

Pridajme do triedy komponentu vlastnosť, ktorá bude regulovať to, či je blok zobrazený alebo nie:

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

A teraz napíšme implementáciu našich metód pre zobrazenie a skrytie bloku:

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

Vytvorte tlačidlo, kliknutie na ktoré bude prepínať blok: zobrazí, ak je skrytý, a skryje, ak je zobrazený.