В 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.