Nosacījumu reaktivitāte Angular

Reaktivitāte darbosies arī ar nosacījumiem ngIf. Tas nozīmē, ka mēs varam rādīt vai slēpt bloku atkarībā no tā, kas atrodas klases īpašībā.

Izmēģināsim praksē. Pieņemsim, ka mums ir šāds bloks

<div>
	text
</div>

Rādīsim vai slēpsim to atkarībā no nosacījuma:

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

Izveidosim divas pogas. Noklikšķinot uz pirmās, mēs rādīsim mūsu bloku, bet, noklikšķinot uz otrās - slēpsim to:

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

Pievienosim komponenta klasei īpašību, kas regulēs, vai bloks ir redzams vai nē:

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

Un tagad uzrakstīsim mūsu metožu implementāciju bloka rādīšanai un slēpšanai:

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

Izveidojiet pogu, kuras nospiešana pārslēgs bloku: rādīs to, ja tas ir paslēpts, un slēps, ja tas ir redzams.