File

src/preview.ts

Description

If you pass an <ng-template let-type let-item="item"> to <dnd-preview> as a child, then that template will be rendered so as to follow the mouse around while dragging. What you put in that template is up to you, but in most cases this will be:

<dnd-preview>
  <ng-template let-type let-item="item">
    <ng-content [ngSwitch]="type">
      <!-- one kind of preview per type, using *ngSwitchCase="'TYPE'" -->
      <div *ngSwitchCase="'TYPE'">{{ item | json }}</div>
    </ng-content>
  </ng-template>
</dnd-preview>

Implements

PreviewListener OnInit OnDestroy

@if (previewEnabled$ | async) {
  @if (collect$ | async; as c) {
    <dnd-preview-renderer>
      @if (c.isDragging) {
        <ng-container
          *ngTemplateOutlet="
            content;
            context: { $implicit: c.itemType, type: c.itemType, item: c.item }
          "
        />
      }
    </dnd-preview-renderer>
  }
}