Привязка CSS стилей в Angular

В Angular также можно непосредственно Добавлять стили для блока. Это делается с помощью атрибута тега, написанного в следующем формате:

[style.стилевоеСвойство]="значение свойства"

При этом имена 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>

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

Дан блок. Сделайте так, чтобы первый клик на блок красил его в красный цвет, а второй клик - в зеленый.

Дан блок. Дана кнопка. Сделайте так, чтобы нажатие на кнопку увеличивало ширину блока в два раза.