Реактивност на условијата во Angular

Реактивноста ќе работи и со услови ngIf. Ова значи дека можеме да прикажуваме или да скриеме блок во зависност од тоа што содржи во својството на класата.

Ајде да пробаме во пракса. Нека имаме следниов блок

<div>
	text
</div>

Ајде да го прикажуваме или скриеме според услов:

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

Сега ајде да направиме две копчиња. При клик на првото да го прикажуваме нашиот блок, а при клик на второто - да го скриеме:

<button (click)="show()">
	show
</button>
<button (click)="hide()">
	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;
	}
}

Направете копче, притискање на кое ќе го вклучува/исклучува блокот: да го прикажува, ако е скриен, и да го скрие, ако е прикажан.