在动态组件列表上带有ng-template的cdkDropList不起作用

Question

I'm trying to use Drag&Drop features released with Angular Material 7. And dynamically creating component using ng-tempalte.

<div cdkDropList (cdkDropListDropped)="dropLocal($event)"> <ng-template #components></ng-template> </div>

and added cdkDrag at components.

I am using createComponent at parent component to keep on create components. viewContainerRef.createComponent

but dragdrop functionality is not functional since cdkDrag must be in a tag nested inside the one with cdkDropList, otherwise the dragged element won't detect the drop zone.

reference : https://stackoverflow.com/a/54158293/4481952

Is there a way around to make dropfunctionality work?

demo code https://stackblitz.com/edit/angular-ngtemplate-reorder?file=src%2Fapp%2Fapp.component.html

Answer 1

The problem is you can't use cdkDrag and cdkDropList with componenet , we have to use service for that which is recently released with AngularMaterial 3.5.+

CdkDrag uses dependency injection to find out whether it's inside a CdkDropList which doesn't work when the template is inside a different component. For more advanced cases like this one you can use the DragDrop service to attach the drag&drop functionality yourself.

Refer https://github.com/angular/material2/issues/15553

Stackblitz code for implementation of cdkService: https://stackblitz.com/edit/angular-ngtemplate-reorder-7i6uuk?file=src%2Fapp%2Fapp.component.ts

hope this helps out someone else.