CngxHoverable

Tracks whether the host element is currently hovered via mouse pointer.

Designed as a hostDirective composition primitive - attach it to components that need hover state without implementing their own mouseenter/mouseleave logic. Host components read the read-only hovered signal via inject(CngxHoverable, { host: true }); the pointer events are the only writers.

Used internally by CngxTreetableRow for row highlight-on-hover.

As hostDirective#

@Component({
  hostDirectives: [{ directive: CngxHoverable }],
})
export class MyCard {
  private readonly hover = inject(CngxHoverable, { host: true });
  readonly isHovered = this.hover.hovered; // Signal<boolean>
}

Standalone#

<div cngxHoverable #h="cngxHoverable" [class.highlight]="h.hovered()">
  Hover me
</div>