Используете ли CSS свойство hover в директиве Angular?

Question

Вот директива, по умолчанию.

import { Directive, Input, Renderer2, ElementRef } from '@angular/core';

@Directive({
  selector: '[newBox]'
})
export class BoxDirective {

  @Input() backgroundColor = '#fff';
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit(): void {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', this.backgroundColor);
  }

}

Теперь, при наведении курсора, я хочу изменить цвет фона.Как мне это сделать в директиве?

Answer 1

используйте HostListener для прослушивания событий

  @HostListener('mouseover')
  onMouseOver() {
    this.backgroundColor = '#fff';
  }

  @HostListener('mouseout')
  onMouseOut() {
    this.backgroundColor =  '#000';
  }