> For AI agents: the complete documentation index is available at https://gultyayev.github.io/ngx-virtual-dnd/llms.txt, the full documentation bundle is available at https://gultyayev.github.io/ngx-virtual-dnd/llms-full.txt. # Components All components are standalone and exported from `ngx-virtual-dnd`. ## VirtualSortableListComponent **Selector:** `vdnd-sortable-list` Droppable, virtual scroller and placeholder in one element. The default choice. See the [Quick start](https://gultyayev.github.io/ngx-virtual-dnd/guide/start/quick-start.md). | Input | Type | Default | Description | | ---------------------- | ---------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `droppableId` | `string` | **required** | Unique ID of this list | | `items` | `T[]` | **required** | Items to render | | `itemHeight` | `number` | **required** | Row height in px (the estimate when `dynamicItemHeight` is on) | | `itemIdFn` | `(item: T) => string` | **required** | Returns an item's ID; must equal the `vdndDraggable` value rendered for it | | `itemTemplate` | `TemplateRef>` | **required** | Row template; its root element carries `vdndDraggable` | | `group` | `string` | — | Group name. Not needed inside a `vdndGroup` | | `containerHeight` | `number` | — | Height in px. Without it, give the inner `vdnd-virtual-scroll` a CSS height | | `dynamicItemHeight` | `boolean` | `false` | Measure rows instead of using a fixed height | | `trackByFn` | `(index: number, item: T) => string \| number` | derived from `itemIdFn` | Track-by function for rendering | | `droppableData` | `unknown` | — | Arbitrary data, delivered as `DropEvent.destination.data` | | `disabled` | `boolean` | `false` | Stop items being dropped into this list (items can still be dragged out; set `disabled` on the draggables too for a read-only list) | | `overscan` | `number` | `3` | Rows rendered beyond the visible area, above and below | | `recycleRows` | `boolean` | `false` | Reuse the views of rows that scroll out, see [Row recycling](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/performance.md#row-recycling). Added in 3.3.0 | | `autoScrollEnabled` | `boolean` | `true` | Scroll when dragging near the edges | | `autoScrollConfig` | `Partial` | `{}` | Auto-scroll tuning, see [Auto-scroll](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/auto-scroll.md) | | `constrainToContainer` | `boolean` | `false` | Keep the preview and drop position inside the list | | `scrollInsetTop` | `number` | `0` | Height (px) of content overlaid on the top of the rows; they start below it. See [Scroll insets](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/page-scroll.md#sticky-headers-and-footers) | | `scrollInsetBottom` | `number` | `0` | Height (px) of content overlaid on the bottom of the rows; the last one scrolls clear of it | | Output | Type | Description | | ----------------- | ---------------------- | ------------------------------------------------------------------------------- | | `drop` | `DropEvent` | An item was dropped into this list | | `placeholderMove` | `PlaceholderMoveEvent` | The placeholder moved within this list (every row displacement). Added in 3.2.0 | The item template context (`VirtualScrollItemContext`) exposes `$implicit` (the item), `index` (position in the full list) and `isSticky`. ## VirtualScrollContainerComponent **Selector:** `vdnd-virtual-scroll` Low-level virtual scroller. Place it inside an element with `vdndDroppable`. See [Choosing a component](https://gultyayev.github.io/ngx-virtual-dnd/guide/essentials/choosing-a-component.md#low-level-scroller). | Input | Type | Default | Description | | ----------------------- | ---------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------- | | `items` | `T[]` | **required** | Items to render | | `itemHeight` | `number` | **required** | Row height in px | | `itemIdFn` | `(item: T) => string` | **required** | Returns an item's ID; must equal its `vdndDraggable` value | | `itemTemplate` | `TemplateRef>` | **required** | Row template | | `droppableId` | `string` | — | ID of the enclosing `vdndDroppable`; needed to show the placeholder | | `containerHeight` | `number` | — | Height in px. Without it, give the element a CSS height | | `dynamicItemHeight` | `boolean` | `false` | Measure rows | | `trackByFn` | `(index: number, item: T) => string \| number` | derived from `itemIdFn` | Track-by function | | `overscan` | `number` | `3` | Extra rows rendered above and below | | `recycleRows` | `boolean` | `false` | Reuse the views of rows that scroll out. Added in 3.3.0 | | `stickyItemIds` | `string[]` | `[]` | IDs of items that stay rendered at any scroll position | | `autoStickyDraggedItem` | `boolean` | `true` | Keep the dragged item rendered while it is out of view | | `scrollContainerId` | `string` | — | ID used to register the container for auto-scroll | | `autoScrollEnabled` | `boolean` | `true` | Scroll when dragging near the edges | | `autoScrollConfig` | `Partial` | `{}` | Auto-scroll tuning | | `scrollInsetTop` | `number` | `0` | Height (px) of content overlaid on the top of the rows; they start below it | | `scrollInsetBottom` | `number` | `0` | Height (px) of content overlaid on the bottom of the rows; the last one scrolls clear of it | | Method | Signature | Description | | ----------------- | ---------------------------- | ---------------------------- | | `scrollTo` | `(position: number) => void` | Scroll to an absolute offset | | `scrollToIndex` | `(index: number) => void` | Scroll to an item by index | | `scrollBy` | `(delta: number) => void` | Scroll by a relative amount | | `getScrollTop` | `() => number` | Current scroll offset | | `getScrollHeight` | `() => number` | Total scroll height | Get the instance with `viewChild(VirtualScrollContainerComponent)`. ## VirtualViewportComponent **Selector:** `vdnd-virtual-viewport` Self-scrolling container for `*vdndVirtualFor`. Positions all rows with one GPU-accelerated transform. Children inherit `itemHeight` and `dynamicItemHeight`. Needs a CSS height. | Input | Type | Default | Description | | ------------------- | --------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- | | `itemHeight` | `number` | **required** | Row height in px | | `dynamicItemHeight` | `boolean` | `false` | Measure rows | | `contentOffset` | `number` | `0` | Space in px reserved above the rows | | `scrollContainerId` | `string` | — | ID used to register for auto-scroll | | `autoScrollEnabled` | `boolean` | `true` | Scroll when dragging near the edges | | `autoScrollConfig` | `Partial` | `{}` | Auto-scroll tuning | | `scrollInsetTop` | `number` | `0` | Height (px) of content pinned over the top edge; the rows start below it, or `contentOffset` down when that is more | | `scrollInsetBottom` | `number` | `0` | Height (px) of content pinned over the bottom edge; the last row scrolls clear of it | ## VirtualContentComponent **Selector:** `vdnd-virtual-content` Virtual rows inside an external scroll container, for [page-level scrolling](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/page-scroll.md). Must be inside a `vdndScrollable` element. Projects an optional `[vdndContentHeader]` above the rows. | Input | Type | Default | Description | | ------------------- | --------- | ------------ | -------------------------------------------------------------------------- | | `itemHeight` | `number` | **required** | Row height in px | | `dynamicItemHeight` | `boolean` | `false` | Measure rows | | `contentOffset` | `number` | `0` | Offset above the rows; replaced by the measured `vdndContentHeader` height | ## DragPreviewComponent **Selector:** `vdnd-drag-preview` Renders the element that follows the pointer. **Required**: place it once. It moves itself into a body-level `div.vdnd-overlay-container`. The preview box is `inert` and `aria-hidden="true"`. See [Preview and placeholder](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/preview-and-placeholder.md). | Input | Type | Default | Description | | ----------------- | ------------------------------------ | ---------------- | --------------------------------------------------------- | | `previewTemplate` | `TemplateRef>` | — | Custom preview; replaces the default clone | | `cursorOffset` | `{ x: number; y: number }` | `{ x: 8, y: 8 }` | Fallback offset, used only when the grab point is unknown | ## PlaceholderComponent **Selector:** `vdnd-placeholder` A drop-position indicator you render yourself. The built-in lists do not use it; they render `DragPlaceholderComponent`. | Input | Type | Default | Description | | ---------- | --------------------------------- | ------- | -------------------------- | | `height` | `number` | `50` | Height in px | | `template` | `TemplateRef` | — | Custom placeholder content | ## DragPlaceholderComponent **Selector:** `vdnd-drag-placeholder` The empty placeholder that the lists render at the drop position, sized to the dragged item. You rarely use it directly; style it through `.vdnd-drag-placeholder`. | Input | Type | Default | Description | | ------------ | -------- | ------------ | ------------ | | `itemHeight` | `number` | **required** | Height in px |