Reaktivitet af betingelser i Angular

Reaktivitet vil også fungere med betingelser ngIf. Det betyder, at vi kan vise eller skjule en blok afhængigt af hvad der indeholdes i klasseegenskaben.

Lad os prøve det i praksis. Antag, at vi har følgende blok

<div>
	text
</div>

Lad os vise eller skjule den baseret på en betingelse:

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

Lad os nu lave to knapper. Ved klik på den første vil vi vise vores blok, og ved klik på den anden - skjule den:

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

Lad os tilføje en egenskab til komponentklassen, som vil regulere, om blokken er vist eller skjult:

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

Og lad os nu skrive implementeringen af vores metoder for at vise og skjule blokken:

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

Lav en knap, hvor et klik på den vil toggle blokken: vise den, hvis den er skjult, og skjule den, hvis den er vist.