Item Hover
Overview
The ItemHoverService keeps track of the hover state for all items in the tree.
It exposes an observable to reactively track the currently hovered item.
Import
import { DndModule } from 'ngx-builder-dnd';Selector
ItemHoverService
How it works
The service automatically marks hoverable elements with the data-ngx-item-hover attribute.
Directives like DropListDirective use this attribute to locate the currently hovered item.
API Reference
Observables
| Name | Description |
|---|---|
_hoveredItem$: BehaviorSubject<HTMLElement | null> | Internal subject holding the currently hovered element. |
Properties
| Name | Description |
|---|---|
ITEM_HOVER_ATTR: string | The attribute used to mark hoverable builder item elements. |
Methods
| Name | Parameters | Returns | Description |
|---|---|---|---|
hovered$ | - | Observable<HTMLElement | null> | Observable emitting the currently hovered item. |
setHoveredItem | itemElement: HTMLElement | null | void | Sets the currently hovered item. |
hoveredElement | - | HTMLElement | null | Getter/setter for the currently hovered element. |
See Also
- Drop List Directive - Makes an element a drop-list host.
- Hover Indicator Directive - Shows a visual indicator while hovering during drag.