Reaktywność warunków w Angularze

Reaktywność będzie również działać z warunkami ngIf. Oznacza to, że możemy wyświetlać lub ukrywać blok w zależności od tego, co zawiera właściwość klasy.

Spróbujmy w praktyce. Załóżmy, że mamy następujący blok

<div>
	tekst
</div>

Wyświetlajmy lub ukrywajmy go warunkowo:

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

Stwórzmy teraz dwa przyciski. Kliknięcie pierwszego ma pokazywać nasz blok, a kliknięcie drugiego - ukrywać:

<button (click)="show()">
	pokaż
</button>
<button (click)="hide()">
	ukryj
</button>

Dodajmy do klasy komponentu właściwość, która będzie regulować, czy blok jest pokazany, czy nie:

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

A teraz napiszmy implementację naszych metod do pokazywania i ukrywania bloku:

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

Stwórz przycisk, którego naciśnięcie będzie przełączać blok: pokazywać, jeśli jest ukryty, i ukrywać, jeśli jest pokazany.