Angular має набір вбудованих директив, таких як ngIf, ngFor та ngClass. Однак ви також можете створювати власні користувацькі директиви для виконання специфічних завдань у вашому застосунку. Розглянемо, як створити таку директиву на практичному прикладі.

Створення користувацької директиви

Спочатку рекомендується організувати код, створивши окрему папку для ваших директив. Назвемо її directives.

Ця команда створює нову папку з назвою directives у каталозі app та додає до неї файл нової директиви:

• highlight-on-complete.directive.ts – містить логіку директиви;

• highlight-on-complete.directive.spec.ts – файл модульних тестів (можна видалити, якщо не потрібен).

Ось як виглядає базова структура директиви:

Визначення функціоналу директиви

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

Щоб повідомити Angular, що цей клас є директивою, його декорують за допомогою @Directive:

@Directive({
  selector: '[appHighlightOnComplete]'
})

Селектор [appHighlightOnComplete] означає, що директива буде використовуватися як атрибут, а не як тег або структурна директива.

У вашому HTML ви застосуєте її так:

<div [appHighlightOnComplete]="task.completed"></div>

Реакція директиви на зміни

Щоб виявляти зміни у вхідному параметрі completed, реалізуємо інтерфейс OnChanges:

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

Що це робить:

• Повідомляє Angular, що значення буде надано з шаблону (раніше ми передавали task.complete із шаблону);

• Прив'язує внутрішню властивість completed директиви до значення, переданого із шаблону;

• Встановлює значення за замовчуванням true (яке буде перевизначено після отримання фактичних даних).

Безпечний доступ до DOM

Angular використовує впровадження залежностей для надання доступу до DOM і інструментів рендерингу.

У конструкторі ми впроваджуємо:

ElementRef надає посилання на хост-елемент DOM. Renderer2 дозволяє безпечно змінювати стилі та атрибути без прямого маніпулювання DOM.

Реакція на зміни з ngOnChanges

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

Повна реалізація:

Метод ngOnChanges викликається щоразу, коли Angular виявляє зміни у вхідних властивостях директиви.

У цьому випадку він реагує на оновлення значення completed, яке передається з шаблону. Якщо completed дорівнює true, директива додає зелений контур і світло-зелений фон до елемента. Якщо значення false, ці стилі видаляються, і елемент повертається до початкового вигляду. Це забезпечує візуальне позначення виконаних завдань.

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