Динамично променяне на стилове в 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>

Дадени са три блока. Направете три бутона, всеки от които ще превключва своя блок.