Свързване на CSS класове в Angular

В Angular можете да включвате и изключвате прилагането на CSS клас за блок. Това се прави с помощта на атрибут на тага, написан в следния формат:

[class.име_на_клас]="true или false"

Нека видим на практика. Да предположим, че имаме следните класове:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Нека видим с примери как се включват и изключват тези класове за блок.

Пример

Нека включим един клас и изключим друг:

<div [class.blue]="true" [class.bold]="false">
	text
</div>

Да предположим, че състоянията на класовете се съхраняват в свойства на класа:

export class AppComponent {
	public isBlue: boolean = true;
	public isBold: boolean = false;
}

Нека свържем видимостта на класа в зависимост от стойностите на нашите свойства:

<div [class.blue]="isBlue" [class.bold]="isBold">
	text
</div>

Даден е следният CSS клас:

.hidden {
	visibility: hidden;
}

Свържете този клас към блока. Направете бутон, при натискане на който блокът ще се скрива или показва.