В Angular директиви атрибутів відіграють ключову роль у динамічній зміні поведінки та зовнішнього вигляду елементів без зміни структури DOM. Дві з найпоширеніших директив атрибутів — це ngClass та ngStyle. Ці директиви забезпечують гнучкі способи керування стилями елементів і CSS-класами залежно від стану компонента.

Що таке ngClass?

Це особливо корисно, коли потрібно змінити вигляд елемента у відповідь на зміну даних — наприклад, виділити активний елемент або застосувати стилі залежно від статусу.

ngClass підтримує синтаксис об'єкта, масиви рядків та функції, які повертають ці формати для динамічного застосування класів.

Синтаксис об'єкта

Використовуйте об'єкт, де ключі — це назви класів, а значення — булеві умови. Якщо умова дорівнює true, клас застосовується.

У цьому прикладі класи додаються або видаляються залежно від значення властивості isActive у компоненті.

Якщо isActive дорівнює true, додається клас active, а inactive видаляється. Якщо isActive дорівнює false, навпаки.

Масив рядків

Використовуйте масив, де кожен рядок представляє назву CSS-класу, яка буде додана до елемента. Такий підхід корисний, коли потрібно динамічно застосувати декілька класів без умов.

Тут класи, перелічені в масиві, застосовуються до елемента.

Використання масиву корисне, коли потрібно динамічно призначати кілька класів — особливо якщо їхня кількість може змінюватися.

Функція

Використовуйте функцію, яка повертає будь-який із підтримуваних форматів: об'єкт, масив рядків або один рядок. Це зручно, коли застосовані класи залежать від складнішої логіки або динамічних умов.

ngClass також може приймати функцію, яка повертає об'єкт, масив або рядок залежно від визначеної вами логіки.

У цьому випадку метод getClass() повертає об'єкт, де імена CSS-класів є ключами, а булеві умови — значеннями.

• Якщо isError дорівнює true, буде застосовано error-class;
• Якщо isSuccess дорівнює true, буде застосовано success-class;
• Якщо обидва значення дорівнюють false, жодні класи не будуть додані.

Що таке ngStyle?

За допомогою ngStyle можна змінювати такі властивості, як колір фону, шрифт, розмір, позиціонування та інші — безпосередньо з компонента.

Як працює ngStyle?

ngStyle приймає об'єкт, де ключами є назви CSS-властивостей, а значеннями — вирази, які обчислюються під час рендерингу.

Якщо вираз повертає значення, це значення застосовується до відповідної CSS-властивості елемента.

Приклад із об'єктом стилів

У цьому прикладі динамічно змінюється колір тексту та розмір шрифту елемента:

Якщо textColor дорівнює red, а fontSize — 20px, ці стилі буде застосовано до елемента. Такий підхід дозволяє легко комбінувати кілька стилів в одному виразі для більшої гнучкості.

Приклад із використанням змінної та виразу

Якщо потрібно застосувати стилі на основі логіки, можна використовувати вирази безпосередньо в шаблоні:

Якщо isActive дорівнює true, колір фону буде зеленим; якщо false — червоним. Тут використовується тернарний оператор для стислого та виразного опису логіки.

Приклад із динамічним значенням

Вирази в ngStyle також можуть базуватися на методах. Можна використовувати методи компонента для динамічного обчислення значень стилів:

У цьому прикладі метод getDynamicStyle() повертає об'єкт стилю на основі поточного значення isDarkMode.

Це особливо корисно, коли стилі залежать від зовнішніх умов, таких як налаштування користувача, час доби або тема застосунку.

Коли слід використовувати ngClass, а коли ngStyle?

• Використовуйте ngClass, коли працюєте з наперед визначеними CSS-класами. Це ідеально підходить для повторного використання стилів у різних місцях і централізованого керування стилями через таблицю стилів;

• Використовуйте ngStyle, коли потрібно застосовувати стилі динамічно та безпосередньо — наприклад, для встановлення кольорів, розмірів або інших візуальних властивостей, які не пов'язані з багаторазовими класами.

Використовуючи як ngClass, так і ngStyle, ви можете легко та ефективно контролювати зовнішній вигляд і поведінку елементів на основі даних компонента — без необхідності вручну змінювати DOM.