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

I had also to face to that problem. I tried the id approach but I didn't feel too much too confident while using. When I console.log in this addId() function, I can see the same id repeated several times. Instead of that, I tried to use the @ViewChildren decorator to have the cdkList components in real time, and it works very well for me.

In typescript

  cdkDropTrackLists: CdkDropList[];
  @ViewChildren(CdkDropList)
  set cdkDropLists(value: QueryList) {
    this.cdkDropTrackLists = value.toArray();
  }

In template

I think I can improve it while cdkDropLists as a QueryList has a changes properties which an Observable.