CODEWITHSUNDEEP
angular-materialangular-cdk-drag-drop
Oam Psy
Oam Psy

Reputation: 8663

Unable to drop Angular Material Drop Item

I am attempting to us Angular Material cdkDragDrop.

The list is attempting to be populated from a nested object. I am able to display the lists, but when attempting to move an item, it does not appear in the 'Added Details' list

Code: https://stackblitz.com/edit/angular-awxclk?file=src%2Fapp%2Fcdk-drag-drop-connected-sorting-example.html

Upvotes: 0

Views: 342

Answers (1)

TotallyNewb
TotallyNewb

Reputation: 4790

In your code, you are using moveItemInArray and transferArrayItem which expects (as the name suggests) first parameter to be an array. In your case you are pointing it to an object, so the method throws internally.

What you want to do is to use actual collections in as the [cdkDropListData] in both containers. Then, you iterate those same collection in the *ngFor directive.

So, in your constructor / onInit you transform the object into array and use that array as [cdkDropListData]. Then, if you want to, you can transform the array back into object and update it at the end of your drop method.

Upvotes: 1

Related Questions