CngxHoverIntent
projects/common/interactive/hover-intent/hover-intent.directive.ts
Import#
import { CngxHoverIntent } from '@cngx/common/interactive'
Description#
Debounced hover-intent primitive. Turns raw pointer enter/leave into a
boolean signal that flips true only after the pointer has rested on the
host for enterDelay ms of continuous hover, and back to false after
leaveDelay ms of continuous un-hover.
A pointer that merely passes over the host never fires: the pending timer
is cancelled by the opposite event before it elapses. Use it for
hover-to-reveal panels, hover-to-prefetch triggers, or any affordance that
reads as nervous when it reacts to an instant mouseenter.
The active signal is read-only - it is derived from pointer events and is
never consumer-writable, so it is exposed via asReadonly() plus an
intentChange output rather than a two-way model(). Pointer-only, no
keyboard surface: hover intent is a mouse concept and carries no ARIA.
Hover to reveal
<div cngxHoverIntent #hi="cngxHoverIntent" [enterDelay]="150">
<span>Card</span>
@if (hi.active()) { <div class="detail">…</div> }
</div>Bind the edge
<a cngxHoverIntent (intentChange)="$event && prefetch()">Link</a>Metadata#
Host#
Index#
Properties
Inputs
Outputs
HostListeners
Inputs#
ms of continuous hover before active settles to true.
this.defaults?.enterDelay ?? 120Outputs#
Instance Properties#
unknownDebounced hover-intent state. true only after enterDelay ms of continuous hover.
this.intentState.asReadonly()Methods#
Feed a satellite element's pointerenter into the debounce. For hosts
whose hover surface spans more than the directive's own element (a submenu
parent item plus its popover panel), forward the extra element's pointer
events here so ONE debounced intent covers the combined surface: an enter
on either element cancels a pending leave timer exactly like the host's
own listeners, so crossing the gap between the elements never flickers.
Satellite counterpart to notifyEnter for pointerleave.
HostListeners#
| Event | Handler |
|---|---|
(pointerenter) | pointerenter() |
(pointerleave) | pointerleave() |