Angular 13 - Drag and drop is not working with ngFor -json array

Question

I'm giving my very 1st attempt with Angular material CDK drag and drop for one my user story.

I don't understand why array of object is not working in cdk drag and drop

Argument of type 'CdkDragDrop<{ id: number; imgSrc: string; name: string; }[], any, any>' is not assignable to parameter of type 'CdkDragDrop<string[], string[], any>'. The types of 'container.data' are incompatible between these types. Type '{ id: number; imgSrc: string; name: string; }[]' is not assignable to type 'string[]'.

I'm trying to drag image from below data source

items = [
    {
      id: 0,
      imgSrc: 'https://via.placeholder.com/150/0000FF/808080',
      name: 'Color B',
    },
    {
      id: 1,
      imgSrc: 'https://via.placeholder.com/150/FF0000/FFFFFF',
      name: 'Color R',
    },
    {
      id: 2,
      imgSrc: 'https://via.placeholder.com/150/FFFF00/000000',
      name: 'Color L',
    },
  ]; // drag from this source

Drop it to my empty location

basket = [] // drop items here

my scenario is to load API response in item=[] and do drag and drop it to my basket = [] then submit the reactive form.

I changed this official straight forward example as per my requirement. But getting above mentioned error. Since its very first start I don't know how to fix this issue.

Kindly help me on this.

Thanks to all

Facing below issue in my local even after imported dragNdrop module

No, the code should be in the post and not in external links nor in images — Vega, Jun 30 '22 at 06:48
@Vega I'll keep this in my mind and follow the same in future. forgive now.. I'm not using SO frequently — Flavio, Jun 30 '22 at 06:50

score 0 · Accepted Answer · answered Jun 30 '22 at 05:38

0

I have fixed your stackblitz sample. See here.

First, define Item interface.

interface Item {
  id: number;
  imgSrc: string;
  name: string;
}

Then you have to define items and baskets as Item[].

items: Item[] = [
  :
];

basket: Item[] = [];

And your drop argument should be Item[].

drop(event: CdkDragDrop<Item[]>) {
  :
}

answered Jun 30 '22 at 05:38

N.F.

3,844
3
22
53

Could you explain me how its working now?.. it would help me understand and go further in future. what is the expectation here to make it work? – Flavio Jun 30 '22 at 06:10
@Flavio, the error you got it says that the arguments that you call to the function is not the argument of the function. The variable "event" type CdkDragDrop (or CdkDragEnter, or CdkDragExit, or ...) the "T" should match -. This happens always you see a type `SomeClass` -you should reemplace the "T" by a concrete type-. More about [generic types](https://www.typescriptlang.org/docs/handbook/2/generics.html#hello-world-of-generics) – Eliseo Jun 30 '22 at 06:41
@Eliseo i've updated my question, im getting issue in local even after `imported` `dragndrop module` in my feature module – Flavio Jun 30 '22 at 06:46
@Flavio, the type of the variable you use in `[cdkDropListData]` of **both** cdkDropList should be the same (your "basket" variable has no type), and is the type you use in the argument of the function: `event: CdkDragDrop<..here you type..>`. It's the reason to use Interfaces (if the types are not string[] or number[] or whatever. You always can use `event: CdkDragDrop` but it's not advisable (nor friendly). You can also not use interface and write some like:`basket:{id:number,imgSrc:string,name:string}[] = []` and `drop(event: CdkDragDrop<{id:number,imgSrc:string,name:string}[]>)` – Eliseo Jun 30 '22 at 07:00

Angular 13 - Drag and drop is not working with ngFor -json array

1 Answers1