Skip to main content

Preview Component

Overview​

This model defines the contract for custom drag preview components. It ensures type-safety when passing draggable data (such as Drag Source or DnD Item) to a preview UI component.

PreviewComponent​

import { BlockTreeItem, TDraggableData } from 'ngx-builder-dnd';

export interface PreviewComponent<T extends DragSourceData<any> | DndTreeItem> {
  /**
   * The draggable data for this preview.
   * This must be provided by the library.
   */
  data: T;
}

Example​

import { Component, Input } from '@angular/core';
import { PreviewComponent, DndTreeItem } from 'ngx-builder-dnd';

@Component({
  selector: 'app-item-preview',
  template: `<div class="preview">{{ data.type }}</div>`,
})
export class ItemPreviewComponent implements PreviewComponent<DndTreeItem> {
  @Input() data!: DndTreeItem;
}

Here, ItemPreviewComponent implements PreviewComponent and strongly types its data input. This guarantees that only valid draggable data objects (like DndTreeItem) are passed to the preview UI.

See Also​