Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

drag and drop: *cdkDragPreview not working when using an existing component

See original GitHub issue

What is the expected behavior?

When I set a custom preview with a component, the component is used for the preview.

What is the current behavior?

The component is not showing as the preview. The preview is empty.

What are the steps to reproduce?

Create a drag item, for example.

<div cdkDrag>
  my Item
  <app-room [room]="room" *cdkDragPreview></app-room>
</div>

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 7 Material: 7.3.6

Is there anything else we should know?

Issue Analytics

State:
Created 4 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

2reactions

ataraciukcommented, May 14, 2019

Closing, I found my bug. Sorry for wasting your time. And thank you for suggesting a stackblitz, it helped me think this straight.

1reaction

ataraciukcommented, May 14, 2019

I’m not sure this can help other people, but here it goes anyway: The component I’m using as preview had this *ngIf: *ngIf="!(isDragging$ | async) || !(isSelected$ | async)"

We have a multi-select thing where then you drag all of them. Which of course the one you are dragging is Selected, and you are in dragging mode

I had to add a isPreview in it:

*ngIf="isPreview || !(isDragging$ | async) || !(isSelected$ | async)"

So, really silly thing completely unrelated to drag and drop, but sometimes you start looking at the wrong side of it and you fall in a rabbit hole I guess.

Top Results From Across the Web

cdk-drag-preview not applying styles - css - Stack Overflow

I want the preview to look exactly like the element being dragged, but the preview is only showing the text content of the...

Drag and Drop | Angular Material

Start by importing DragDropModule into the NgModule where you want to use drag-and-drop features. You can now add the cdkDrag directive to elements...

Exploring Drag and Drop with the new Angular Material CDK

Now that we've imported the module we can create our first draggable component by using the cdkDrag directive.

Getting to Know the Angular CDK Drag and Drop Feature

In this article, we'll learn how to use the drag and drop feature. If you want to learn about virtual scrolling, you can...

Angular Material Drag and Drop – Strengths and Limitations

Getting started with Material Drag and Drop is very simple. In an existing angular application with the CDK installed, ...