Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings
Discussion options

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

You must be logged in to vote

Replies: 1 comment

Comment options

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

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
🙏
Q&A
Labels
None yet
2 participants
Morty Proxy This is a proxified and sanitized view of the page, visit original site.