Material 7 Drag and Drop ng-template incompatibility

[swirlsky]

Bug, feature request, or proposal:

BUG (probably)

What is the expected behavior?

Transferring items between lists should be possible

What is the current behavior?

Dragging works but dropping does not. As if the drop zones wouldn't be there at all.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-jcfbx7?file=src/app/hello.component.ts

What is the use-case or motivation for changing an existing behavior?

It is not working as expected.

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

Angular 7.2, Material 7.2, TypeScript 3.2, reproduced in Chrome as well as in Firefox under Ubuntu

Is there anything else we should know?

ng-template and ngTemplateOutlet might cause the problem.
might be relevant: https://stackoverflow.com/questions/53210886

[crisbeto]

It doesn't work, because the cdkDrag looks at the up the tree inside the template to find the closest drop list. In your case the cdkDrag starts off on the outside.

[swirlsky]

I see, thank you! I changed my code keeping this in mind, so now the draggable elements already sense the drop lists, however dropping is still not working. Any suggestion what could cause this?

[swirlsky]

Got it! [cdkDropListData] was missing.

[zombaki]

@crisbeto in this example "https://stackblitz.com/edit/angular-ngtemplate-reorder?file=src%2Fapp%2Fapp.component.html"
cdkDrag is inside dragList even thoug it dosnt work like DragList.

[angular-automatic-lock-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.}