Динамично менување на стилови во 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;
}

Во темплејтот на компонентата ќе направиме div, и ќе му додадеме CSS класа hidden, која ќе се вклучува или исклучува во зависност од својството active од класата на компонентата:

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

Да направиме и копче, при кликање на кое ќе се повикува методот toggle, прикажувајќи или криејќи ја нашата компонента:

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

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