Реактивност услова у 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;
	}
}

Направите дугме, притиском на које ће се укључити/искључити блок: приказати га, ако је сакривен, и сакрити га, ако је приказан.