Skip to main content

Drop List Template

Overview​

The ngxDropListTemplate directive is a type-safe helper for Angular templates. It does not add any runtime logic — instead, it allows Angular's type system to correctly infer the $implicit variable type inside an ng-template that represents a item in the list.

This improves developer experience by enabling autocompletion and type checking when working with lists of draggable/droppable items.

Import​

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

Selector​

ngxDropListTemplate

API Reference​

Type Parameters​

NameDescription
T extends DndTreeItemDefines the type of items in the drop list. Enables strong typing for your list items.

Inputs​

NameTypeDefaultDescription
ngxDropListTemplateT[]-The list of items made available to the template.

Context​

Within the ng-template, Angular will infer the following context type:

interface DropListTemplateContext<T extends DndTreeItem> {
  $implicit: T;
}

Example​

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

See Also​