Динамичка измена стилова у Angular

Употребом директива ngClass и ngStyle можемо да вежемо изразе за елементе, захваљујући чему ће се наши стилови динамички мењати.

Хајде да направимо да се текст сакрива или приказује употребом својства active класе компоненте:

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

За ово ћемо написати функцију toggle, која ће наизменично укључивати или искључивати ово својство:

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

У CSS фајлу компоненте дефинишимо следећи стил за класу:

.hidden {
	display: none;
}

У темплејту компоненте направимо див, и додајмо му CSS класу hidden, која ће се укључивати или искључивати у зависности од својства active из класе компоненте:

<div [ngClass]="{hidden: active}">
	text
</div>

Направимо такође дугме, чијим притиском ће се позивати метод toggle, приказујући или кријући наш компонент:

<button (click)="toggle()">
	toggle
</button>

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