Hoverable Directive angular

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

@Directive({
  selector: `
    [hoverable],
    [Hoverable],
  `,
})
export class HoverableDirective {
  hovered = output<boolean>();

  @HostListener('mouseenter')
  onMouseEnter() {
    this.hovered.emit(true);
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.hovered.emit(false);
  }
}