Skip to main content

Drag List

Overview​

The DragListComponent is a wrapper component built on top of the DropListDirective. It provides a ready-to-use structure for rendering and managing a list of draggable items within the builder's tree system.

Import​

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

Selector​

ngx-drag-list

API Reference​

Type Parameters​

NameDescription
T extends DndTreeItemDefines the type of items the list can contain.

Inputs​

NameDefaultDescription
list: T[][]The list of draggable items to render inside the list container.
createItem: (args: ElementDropTargetEventBasePayload) => T-Factory function that creates a new item (DndTreeItem).
allowedItems: Array<string | number> | undefined-Restricts which item types can be dropped into the list.
contentTemplate: TemplateRef<DropListTemplateContext<T>>-Required template used to render the list items. Must use ngxDropListTemplate.
emptyTemplate: TemplateRef<any>-Optional template to render when the list is empty.
allowedEdges: Edge[]['top', 'bottom']Allowed edges used to determine the closest drop position. Called repeatedly during drag.

Examples​

Minimal Example​

<ngx-drag-list
  [list]="items"
  [createItem]="createItem"
  [contentTemplate]="itemTemplate">

  <ng-template [ngxDropListTemplate]="items" let-items>
    <div *ngFor="let item of items">{{ item.id }}</div>
  </ng-template>
</ngx-drag-list>

Example with Empty State​

<ngx-drag-list
  [list]="items"
  [createItem]="createItem"
  [contentTemplate]="itemTemplate"
  [emptyTemplate]="emptyStateTemplate">

  <ng-template [ngxDropListTemplate]="items" let-items>
    <div *ngFor="let item of items">{{ item.id }}</div>
  </ng-template>

  <ng-template #emptyStateTemplate>
    <div>No items available.</div>
  </ng-template>
</ngx-drag-list>

Example with Custom Block Template​

<ngx-drag-list
  [list]="items"
  [createItem]="createItem"
  [contentTemplate]="itemTemplate">

  <ng-template [ngxDropListTemplate]="items" let-items>
    <div *ngFor="let item of items" class="custom-item">
      <span class="img">{{ item.imageUrl }}</span>
      <strong>{{ item.name }}</strong>
    </div>
  </ng-template>
</ngx-drag-list>

See Also​