Що робить ngStyle?

AngularJunior~1 хв читання

Директива [ngStyle] в Angular, це атрибутна директива, яка дозволяє динамічно змінювати CSS-стилі елемента через об'єкт із ключами та значеннями.

Принцип роботи:

[ngStyle] приймає об'єкт, де ключ, це ім'я CSS-властивості, значення, її значення.
Стилі застосовуються динамічно й оновлюються при зміні даних.

Приклад:

html

<div [ngStyle]="{'color': textColor, 'font-size.px': fontSize}">
  Динамічний стиль
</div>

typescript

textColor = 'red';
fontSize = 20;

Висновок: ngStyle дозволяє змінювати окремі CSS-властивості елемента залежно від стану компонента, без використання класів.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.