Reaktiwiteit van Voorwaardes in Angular

Reaktiwiteit sal ook werk met voorwaardes ngIf. Dit beteken dat ons 'n blok kan toon of wegsteek, afhangend van wat in die klas se eienskap vervat is.

Kom ons probeer dit in praktyk. Gestel ons het die volgende blok

<div>
	teks
</div>

Kom ons gaan dit toon of wegsteek volgens 'n voorwaarde:

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

Laat ons nou twee knoppies maak. Met 'n klik op die eerste een sal ons ons blok toon, en met 'n klik op die tweede een - dit wegsteek:

<button (click)="show()">
	toon
</button>
<button (click)="hide()">
	steek weg
</button>

Laat ons 'n eienskap by die komponent se klas voeg wat sal reguleer of die blok getoon word of nie:

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

En nou skryf ons die implementering van ons metodes om die blok te toon en weg te steek:

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

Maak 'n knoppie, waarop 'n klik die blok sal wissel: toon dit as dit weggesteek is, en steek dit weg as dit getoon word.