Reactiviteit van voorwaarden in Angular

Reactiviteit werkt ook met voorwaarden ngIf. Dit betekent dat we een blok kunnen tonen of verbergen afhankelijk van wat er in de klasse-eigenschap staat.

Laten we het in de praktijk proberen. Stel dat we het volgende blok hebben

<div>
	tekst
</div>

Laten we het tonen of verbergen op basis van een voorwaarde:

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

Laten we nu twee knoppen maken. Bij klik op de eerste tonen we ons blok, en bij klik op de tweede - verbergen we het:

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

Laten we aan de klasse-component een eigenschap toevoegen die regelt of het blok getoond of verborgen is:

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

En laten we nu de implementatie van onze methodes voor het tonen en verbergen van het blok schrijven:

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

Maak een knop waarop klikken het blok zal wisselen: tonen als het verborgen is, en verbergen als het getoond is.