Створення Власних Директив у Angular

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 допомагає писати більш модульний і підтримуваний код.