Hover Indicator

Overview

The HoverIndicatorDirective handles the hover state for a item. This directive manages hover styles and works together with the hover service, which allows other directives (like DropIndicatorDirective) to respond to hover changes.

Required Directives

HoverIndicatorDirective must be used on an element that has one of the following directives, otherwise it will throw an error:

• DropListDirective
• DragDropZoneDirective

Import

import { DndModule } from 'ngx-builder-dnd';

Selector

ngxHoverIndicator

---

API Reference

Inputs

Name	Default	Description
isHovered$: Observable<boolean>	-	Emits true when an item is hovered, false otherwise. Useful for other directives or services that react to hover state.

---

Example

<!-- Using HoverIndicatorDirective with a DragDropZoneDirective -->
<div
  [ngxDragDropZone]="item"
  ngxHoverIndicator
>
  Hoverable item
</div>

---

See Also

• Item Hover Service - Manages hover state and events for draggable items.