Search code examples
angularangular-materialangular-cdk

How to store dragged option element of a row between two different tables

I have two tables with different names generated by different ngFor loops.I used cdkDrag to drag them between diffenet lists.That works but my problem is when I set option on the dropdown and drag it to another list,it disappears as you can see below on the image

Below I updated the option from Audi to Saab(No problem here)

enter image description here

When I try to drag that row from Done list which has new Saab option to ToDo List, selected option disappears on the image below enter image description here

Here my stackblitz example below.I'd be glad if you could help me

https://stackblitz.com/edit/angular-gbls7d?file=src/app/cdk-drag-drop-connected-sorting-example.html

Solution

  • You'll need to save the selected option. E.g. add a property to your objects to store the option then bind to this from the select (property name in example is 'selected'):

    <select id="cars" [(ngModel)]="feed.selected">

    ts list: add to each object(:

     {name:"Example",num:2,char:"4",length:"5",difficulty:"easy", selected
: null},
{name:"Example1",num:2,char:"4",length:"5",difficulty:"easy", selected
: null}
//etc

    As you loop the feed objects, it will bind each corresponding select to that property in the current object.

    StackBlitz example based on yours.