Як пов'язані директиви та DOM-елементи?

У Angular директиви прив'язані до DOM-елементів через селектор:

1. Коли Angular рендерить шаблон, він шукає елементи, що відповідають селекторам директив.
2. Після цього Angular створює екземпляр директиви і зв'язує його з цим елементом.
3. Директива може змінювати властивості, стилі, класи, атрибути елемента, слухати події або керувати його структурою (для структурних директив).
4. Для взаємодії з елементом часто використовують ElementRef та Renderer2, щоб безпечно змінювати DOM.

Приклад:

• Директива appHighlight прив'язується до <p>.
• У її конструкторі через ElementRef можна змінити фон, колір, клас тощо.

Висновок: директиви, це «обгортки» навколо DOM-елементів, які дозволяють Angular керувати їхньою поведінкою та зовнішнім виглядом.