Реактивнокии шартҳо дар Angular

Реактивнокии низ бо шартҳои ngIf кор мекунад. Ин маънои онро дорад, ки мо метавонем блокро нишон диҳем ё пинҳон кунем вобаста ба он чи ки дар хосияти синф мавҷуд аст.

Биёед дар амал санҷем. Бигзор мо блокҳои зеринро дошта бошем

<div>
	матн
</div>

Биёед онро вобаста ба шарт нишон диҳем ё пинҳон кунем:

<div *ngIf="isShow">
	матн
</div>

Акнун ду тугма созем. Бо клик кардан ба якум блокро нишон медиҳем, ва бо клик кардан ба дуввум - пинҳон мекунем:

<button (click)="show()">
	нишон додан
</button>
<button (click)="hide()">
	пинҳон кардан
</button>

Ба синфи компонент хосиятеро илова мекунем, ки он танзим мекунад, ки блок нишон дода мешавад ё на:

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

Ва акнун амалисозии методҳои мо-ро барои нишон додан ва пинҳон кардани блок нависем:

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

Тугмае созед, ки пахш кардан ба он блокро toggle кунад: нишон диҳад, агар он пинҳон бошад, ва пинҳон кунад, агар он нишон дода шавад.