Skip to main content

Drag Source Template

Overview​

The ngxDragSourceTemplate 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 drag source item.

This improves developer experience by enabling autocompletion and type checking when working with your drag source list.

Import​

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

Selector​

ngxDragSourceTemplate

API Reference​

Type Parameters​

NameDescription
TTypeThe data type representing the drag source item's underlying model.
TDragSource extends DragSourceData<TType>The specific drag source data type bound to the template. Defaults to DragSourceData<TType>.

Inputs​

NameTypeDefaultDescription
ngxDragSourceTemplateTDragSource[]-The list of drag source items made available to the template.

Context​

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

interface DragSourceContext<TType, TDragSource extends DragSourceData<TType> = DragSourceData<TType>> {
  $implicit: TDragSource;
}

Example​

<ngx-drag-source-list [dragSourceList]="items">
  <ng-template [ngxDragSourceTemplate]="items" let-item>
    <div>{{ item.name }}</div>
  </ng-template>
</ngx-drag-source-list>

See Also​