Drop Indicator

Overview

The DropIndicatorDirective renders a drop indicator on elements associated with a draggable or droppable target. The directive observes the drag state and displays a visual guide indicating where a item can be dropped.

Required Directives

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

• DropListDirective
• DropZoneDirective
• DragDropZoneDirective

Import

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

Selector

ngxDropIndicator

---

API Reference

Inputs

Name	Default	Description
customContainer: ViewContainerRef	-	Container where the drop indicator component will be rendered. Defaults to the directive's ViewContainerRef.
customElementContainer: HTMLElement	-	HTML element to host the drop indicator instead of the default container.
customDropIndicatorClass: string	-	CSS class to apply to the drop indicator component.

---

Example

<!-- Using DropIndicatorDirective with a DragDropZoneDirective -->
<div
  [ngxDragDropZone]="item"
  ngxDropIndicator
>
  Draggable item with drop indicator
</div>

---

See Also

• Drop Indicator Model - Defines how and where drop indicators are displayed.
• Drop Operations Model - Describes available drop operations and results.
• Drop Indicator Component - Displays indicators for possible drop targets.