CODEWITHSUNDEEP
angulardrag-and-dropangular-materialangular7angular8
Samiul Alam
Samiul Alam

Reputation: 2434

How to use Angular CDK Drag Drop for angular components?

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.

Upvotes: 2

Views: 3427

Answers (1)

dasunse
dasunse

Reputation: 3079

Try this way cdkDropListGroup

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

Upvotes: 1

Related Questions