Reaktivita podmínek v Angular

Reaktivita bude fungovat také s podmínkami ngIf. To znamená, že můžeme zobrazovat nebo skrývat blok v závislosti na tom, co je obsaženo ve vlastnosti třídy.

Pojďme to vyzkoušet v praxi. Předpokládejme, že máme následující blok

<div>
	text
</div>

Pojďme jej zobrazovat nebo skrývat podle podmínky:

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

Vytvořme nyní dvě tlačítka. Kliknutím na první zobrazíme náš blok a kliknutím na druhé - skryjeme:

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

Přidejme do třídy komponenty vlastnost, která bude regulovat, zda je blok zobrazen nebo ne:

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

A nyní napišme implementaci našich metod pro zobrazení a skrytí bloku:

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

Vytvořte tlačítko, jehož stisknutí bude přepínat blok: zobrazit, pokud je skrytý, a skrýt, pokud je zobrazen.