Skip to main content

Drop Indicator

Internal usage

This component is primarily used inside the library. You usually won't need to reference it directly in your code.

Overview​

The DropIndicatorComponent is a visual helper used inside the drag-and-drop system. It renders a styled line that indicates the exact drop position (before, after, top, bottom).

  • Displays a drop line based on the drag target edge.
  • Calculates orientation (horizontal or vertical) automatically.
  • Styles are applied through dynamic CSS variables and classes.

Import​

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

Selector​

ngx-drop-indicator

API Reference​

Inputs​

NameDefaultDescription
instruction: Instruction-Determines which indicator should be rendered.
edge: Edge-The drop edge where the indicator should be shown (top, bottom, left, right).
gap: string-Gap size used to calculate the line's offset.

Properties​

NameDescription
isCombineReturns true if the operation is a combine action.
isReorderReturns true if the operation is a reorder action.

Example​

<ngx-drop-indicator [edge]="'top'" [gap]="'4px'"></ngx-drop-indicator>

This will render a horizontal drop indicator above the target item.

Internal Components​

These components are available for custom implementations, but in normal usage they are automatically handled by ngx-drop-indicator.

Drop Edge Indicator​

Renders the line-based indicator used for reorder operations. It automatically aligns itself based on the current Edge and applies dynamic sizing, offset, and orientation styles.

Inputs​

NameDefaultDescription
edge: Edge-The drop edge where the indicator should be shown (top, bottom, left, right).
gap: string-Gap size used to calculate the line's offset.

Combine Edge Indicator​

Used when the current drag operation enters combine mode (from the Instruction object). This indicator renders a full overlay, visually highlighting that the dragged item will combine.

See Also​