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

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

[style.styleProperty]="property value"

При това имената на CSS свойства, които имат вътре в себе си тире, в нашия случай ще се пишат в camelCase. Нека да разгледаме с примери как това работи.

Пример

Задайте фон на елемента:

<div [style.backgroundColor]="'blue'">
	text
</div>

Пример

Нека имаме някакво свойство, съдържащо цвета на фона:

export class AppComponent {
	public value: string = 'red';
}

Приложете това свойство като стойност за стила:

<div [style.backgroundColor]="value">
	text
</div>

Пример

Нека имаме някакво булево свойство:

export class AppComponent {
	public isActive: boolean = true;
}

Ще свързваме различни стойности на CSS свойство в зависимост от съдържанието на булевото свойство. Използвайте за това тернарния оператор:

<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
	text
</div>

Практически задачи

Даден е блок. Направете така, че първото кликване върху блока да го оцвети в червен цвят, а второто кликване - в зелен.

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