> 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.

# Installation


```sh [npm]
npm install ngx-virtual-dnd
```

```sh [yarn]
yarn add ngx-virtual-dnd
```

```sh [pnpm]
pnpm add ngx-virtual-dnd
```

```sh [bun]
bun add ngx-virtual-dnd
```

```sh [deno]
deno add npm:ngx-virtual-dnd
```

## Requirements

| Requirement       | Version                                 |
| ----------------- | --------------------------------------- |
| `@angular/core`   | `^21.0.0 \|\| ^22.0.0`                  |
| `@angular/common` | `^21.0.0 \|\| ^22.0.0`                  |
| Browsers          | Latest Chrome, Edge, Firefox and Safari |

Its only runtime dependency is `tslib`.

## Imports

Every component, directive, utility and type is exported from the package root. They are all standalone, so you import them directly in the component that uses them:

```ts
import {
  DraggableDirective,
  DragPreviewComponent,
  DropEvent,
  DroppableGroupDirective,
  moveItem,
  VirtualSortableListComponent,
} from 'ngx-virtual-dnd';
```

There are no providers to register and no global stylesheet to include. The one optional token, `VDND_ANIMATION_CONFIG`, turns on [shift and drop animations](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/animations.md). The library only sets the layout styles that virtual scrolling needs. How items, lists and the drop placeholder look is up to your app. See [Styling](https://gultyayev.github.io/ngx-virtual-dnd/guide/features/styling.md) for the CSS classes the library adds.

## Next

Build your first list in the [Quick start](https://gultyayev.github.io/ngx-virtual-dnd/guide/start/quick-start.md).