Angular 7 Drag and Drop - Dynamically Create Drop Zones

Question

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:

Answer 1

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):

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:

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