Можно ли прослушать событие в компоненте и изменить нативный элемент?

Question

Мой компонент использует класс в чистом JS, который создает элементы DOM и возвращает их в шаблон по ссылке:

@ViewChild ("layersContainer", {static: true}) layersContainer: ElementRef;
<div class = "Layers" #layersContainer> </div>

Я передаю ссылку #layersContainer на контейнер этому классу:

new DomBuilderJs (this.layersContainer);

Можно ли каким-то образом прослушивать компонент, поскольку изменения в DOM не встроены компонентом?

Точнее, прослушивать наведите курсор на конкретный c элемент и изменить его уже на стороне компонента?

Answer 1

Я бы предложил создать директиву селектора и добавить прослушиватель событий с помощью hostlistener. Некоторые как показано ниже

    import { Directive, HostListener } from '@angular/core';

@Directive({selector: '[layersContainer]'})
export class LayerContainerSelectorDirective {

  constructor(private elementRef: ElementRef)

  @HostListener('mouseenter') onMouseEnter() {
    this.elementRef.style.color = 'red';
  }
}