How to use Angular CDK Drag Drop for angular components?

2
votes

According to Angular CDK Drag Drop Documentation, all the droppable items should be written with an *ngFor directive iterating through an array. But what if the items that I want to make droppable are angular components? What is the procedure to make them droppable?

For example, the following code is to render a normal droppable div. What if I want to render multiple angular components on the 2nd line. In that case, I can't use the *ngFor directive because every angular components are very different and I can't keep them in any array.

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
</div>

How can I do it like the following? (The following code doesn't work)

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <widget-temperature cdkDrag></widget-temperature>
  <widget-pressure cdkDrag></widget-pressure>
</div>

My main goal is to make a dashboard of widgets that the widgets are draggable and droppable. If anyone knows any suitable library besides Angular CDK Drag Drop that can be used for angular components please let me know.

1
angulardrag-and-dropangular-materialangular7angular8
Can't you wrap the components or pass a variable to them, turning on or off the cdkDrag inside the component? I don't know what the ideal solution would look like but this comes to mind.. – Carsten
Are you talking about dynamic component rendering? – Samiul Alam
No sir, I am not. – Carsten

1 Answers

1
votes

Try this way cdkDropListGroup

<div cdkDropListGroup class="example-list" (cdkDropListDropped)="drop($event)">
<widget-temperature></widget-temperature>
<widget-pressure></widget-pressure>
</div>