Can't activate the placeholder and preview programmatically

[NathanBraslavski]

I am trying to add placeholder and template using

dragRef
          .withPlaceholderTemplate(placeholder)
          .withPreviewTemplate(preivew);

But I had no luck so far.
I was trying to reverse engineer the source code and it looks I am doing the same.

I am defining the placeholder and preview elements before start event

      dragRef.beforeStarted.subscribe(() => {
        const placeholder = {
          template: this.placeholderRef,
          context: undefined,
          viewContainer: this.viewContainerRef,
        };
        const preivew = {
          template: this.previewRef,
          context: undefined,
          viewContainer: this.viewContainerRef,
        };

and getting the template with ViewChild

  @ViewChild('preview', { read: TemplateRef })
  previewRef: TemplateRef<HTMLElement>;

  @ViewChild('placeholder', { read: TemplateRef })
  placeholderRef: TemplateRef<any>;

Here is a link to the stackblitz project
https://stackblitz.com/edit/material-drag-drop-js?file=src%2Fapp%2Fcdk-drag-drop-custom-preview-example.ts

[mikerodonnell89]

@NathanBraslavski did you ever find a solution for this? I am stuck here as well

[amasen02]

Two main reasons why this fails when doing it imperatively via DragRef:

1. Object property key mismatch (templateRef vs template)

Under the hood in @angular/cdk/drag-drop (DragRef), the config object interfaces expected by withPlaceholderTemplate and withPreviewTemplate are:

export interface DragPreviewTemplate<T = any> {
  templateRef: TemplateRef<T>;
  context: T;
  matchSize?: boolean;
}

export interface DragPlaceholderTemplate<T = any> {
  templateRef: TemplateRef<T>;
  context: T;
}

Passing { template: this.placeholderRef } means config.templateRef resolves to undefined. When _getPreviewElement() or _getPlaceholderElement() executes, it attempts to instantiate the embedded view with an undefined template ref.

Update the objects to use templateRef:

dragRef.withPreviewTemplate({
  templateRef: this.previewRef,
  context: undefined,
  matchSize: true
});

dragRef.withPlaceholderTemplate({
  templateRef: this.placeholderRef,
  context: undefined
});

2. Placeholder requires an active DropListRef

If you're using dragDrop.createDrag(element), the placeholder will never render unless the drag ref is attached to a container. Placeholders are managed strictly by the drop list layout cycle to calculate DOM index shifting. If the item isn't registered via dropListRef.withItems([dragRef]), CDK skips placeholder insertion entirely and only renders the floating preview.

3. Setup Timing & Styles

Instead of rebinding inside dragRef.beforeStarted.subscribe(...), attach them directly in ngAfterViewInit() once your @ViewChild references are guaranteed:

ngAfterViewInit() {
  this.dragRef = this.dragDrop.createDrag(this.dragElement.nativeElement);
  
  this.dragRef
    .withPreviewTemplate({
      templateRef: this.previewRef,
      context: { $implicit: this.itemData },
      matchSize: true
    })
    .withPlaceholderTemplate({
      templateRef: this.placeholderRef,
      context: undefined
    });

  // If using inside a custom drop list:
  this.dropListRef.withItems([this.dragRef]);
}

Also make sure any .cdk-drag-preview styling lives in your global styles.scss (or set encapsulation: ViewEncapsulation.None on the wrapper component), since CDK attaches the preview directly to document.body by default.