Tingimuste reaktiivsus Angularis

Reaktiivsus töötab ka tingimustega ngIf. See tähendab, et me saame kuvada või peita plokki sõltuvalt klassi omaduses olevast väärtusest.

Proovime seda praktiliselt. Oletame, et meil on järgmine plokk

<div>
	text
</div>

Kuvame või peidame selle tingimuse alusel:

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

Teeme nüüd kaks nuppu. Esimesele klõpsates kuvame oma ploki ja teisele klõpsates - peidame:

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

Lisame komponendi klassi omaduse, mis reguleerib, kas plokk on nähtav või mitte:

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

Ja nüüd kirjutame meie ploki kuvamise ja peitmise meetodite rakendused:

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

Tehke nupp, mille vajutamine lülitab plokki: kuvab, kui see on peidetud, ja peidab, kui see on nähtav.