Sąlygų reaktyvumas Angular

Reaktyvumas taip pat veiks su sąlygomis ngIf. Tai reiškia, kad galime rodyti arba paslėpti bloką priklausomai nuo to, kas yra klasės savybėje.

Pabandykime praktiškai. Tarkime, kad turime šį bloką

<div>
	text
</div>

Leiskite jį rodyti arba slėpti pagal sąlygą:

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

Dabar sukurkime du mygtukus. Paspaudus pirmąjį rodysime mūsų bloką, o paspaudus antrajį - paslėpsime:

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

Pridėkime į komponento klasę savybę, kuri reguliuos, ar blokas yra rodomas, ar ne:

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

O dabar parašykime mūsų metodų implementaciją bloko rodymui ir slėpimui:

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

Sukurkite mygtuką, kurio paspaudimas perjungs bloką: rodys, jei jis paslėptas, ir paslėps, jei jis rodomas.