Reaktivitet av betingelser i Angular

Reaktivitet vil også fungere med betingelser ngIf. Dette betyr at vi kan vise eller skjule en blokk avhengig av hva som finnes i klasseegenskapen.

La oss prøve det i praksis. La oss si at vi har følgende blokk

<div>
	tekst
</div>

La oss vise eller skjule den basert på en betingelse:

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

La oss nå lage to knapper. Ved klikk på den første vil vi vise blokken vår, og ved klikk på den andre - skjule den:

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

La oss legge til en egenskap i komponentklassen som vil regulere om blokken er vist eller ikke:

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

Og la oss nå skrive implementeringen av metodene våre for å vise og skjule blokken:

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

Lag en knapp, hvor et klikk vil veksle blokken: vise den hvis den er skjult, og skjule den hvis den er vist.