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

[ataraciuk]

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?

[crisbeto]

I'm a little surprised that it doesn't work since we're doing more or less what ngIf does when it matches. Can you post a Stackblitz showing the issue?

[ataraciuk]

Thank you for the prompt response.

I did a simple stackblitz and it works as intended https://stackblitz.com/edit/angular-hjbj2d So I guess I have something wrong on my bigger, real case.

Do you know of any way of checking in the chrome console the output of the preview? I'm trying to find the cause (some style issue? some component declaration issue? markup bug? etc) and seeing what is being rendered would help a lot.

This can be closed for sure, but any guidance on what I could have wrong will be very appreciated :)

[ataraciuk]

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

[crisbeto]

Thank you for tracking it down yourself. If it's something simple, it might be useful to post the fix here so other people that stumble into the same issue can try your fix.

[ataraciuk]

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.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}