Dfyjkt

Is there a way to dynamically create drop zones? I'm having some troubles with ngFor and cdkDropList.

Here is my first list and draggable elements:

 <div class="subj-container" 
 cdkDropListOrientation="horizontal" 
 cdkDropList 
 #subjectList="cdkDropList"
 [cdkDropListData]="subjects" 
 [cdkDropListConnectedTo]="[lessonList]" 
 (cdkDropListDropped)="drop($event)"
 >
 <div class="subject" *ngFor="let subject of subjects" cdkDrag>
 subject.name
 </div>
 </div>

And here is my second list:

 <div class="conta" cdkDropList
 #lessonList="cdkDropList"
 [cdkDropListData]="appointment.lessons"
 [cdkDropListConnectedTo]="[subjectList]"
 (cdkDropListDropped)="drop($event)">
 <div class="sub" cdkDrag *ngFor="let lesson of appointment.lessons">
 lesson.name
 </div>
 </div>

Now, div with class 'conta' is inside of a *ngFor.

My problem is, I suppose, with my second list. If I drag an element from second list to list one, it works normally, but if I try to drag element from list one to any instance of list in second list, it can't recognize that the element is being dragged. Demo here:

Am I doing something wrong here?
The typescript part is working fine.

Thanks

After a full day of research, I found this pull request on Angular CDK repository on Github. Now, since I did not know how to integrate cdkDropListGroup into my example, I decited to create an array of IDs which will be added to [cdkDropListConnectedTo].

Each instance of my second list will have generated ID, and that ID will be added to array with suitable prefix (in my second list, on cdkDropList):

<div cdkDropList
 [attr.id]="addId(i, j)"
 [cdkDropListData]="appointment.lessons"
 [cdkDropListConnectedTo]="[subjectList]"
 (cdkDropListDropped)="drop($event)"
>

addId method:

addId(i, j) 
 this.LIST_IDS.push('cdk-drop-list-' + i + '' + j);
 return i + '' + j;

(cdk-drop-list- is an ID prefix. CDK places this prefix on every element with cdkDropList attribute)

So, my array will look like:

• cdk-drop-list-00


• cdk-drop-list-01


• cdk-drop-list-02


• etc.

Now, I pass that array to [cdkDropListConnectedTo] in my first list:

<div class="subj-container" 
 cdkDropListOrientation="horizontal"
 cdkDropList 
 #subjectList="cdkDropList" 
 [cdkDropListData]="subjects" 
 [cdkDropListConnectedTo]="LIST_IDS"
 (cdkDropListDropped)="drop($event)"
>

And it works flawlessly!

Hope this will help anybody with the same problem. Also, take a look at the pull request I mentioned, my solution is only a workaround, there is probably a better solution with cdkDropListGroup

With cdkDropListGroup you can now do:

<div cdkDropListGroup>

 <div cdkDropList
 [cdkDropListData]="data"
 (cdkDropListDropped)="drop($event)">
 <div class="row m-2">
 <div *ngFor="let i of data cdkDrag>i</div> 
 </div>
 </div>

 <div class="subj-container" 
 cdkDropListOrientation="horizontal"
 cdkDropList 
 #subjectList="cdkDropList" 
 [cdkDropListData]="subjects" 
 (cdkDropListDropped)="drop($event)"> 
 </div>

</div>

No longer a need for cdkDropListConnectedTo in this case.
See https://github.com/angular/material2/blob/master/src/cdk/drag-drop/drag-drop.md