Angular cdk drag and drop. How to drag the element into the nested element of the new added element

Question

I have 2 containers. I can drag an element from the first container to a nested element of the second container. But when I clear an element, that is, I create a new one in its place, I can't drag the element into the nested element of the new element.

If anyone can suggest how to do this.

Stackblitz: https://stackblitz.com/edit/angular-drag-and-drop-child-groups-lqwux1

Answer 1

We can use transferArrayItem to just push the elements to a non existing list and get rid of the elements, I think its causes due to the data in the list and the cdk internal state!

Note the data and the drag and drop state are not in sync, instead of trying to maintain the state over properties, just access all the drag and drop and get the data when you trigger a save.

  removeItem(item: any, i: number) {
    const dataClone = [...this.dnd?.data];
    if (dataClone.length) {
      dataClone.forEach((item: any, i: number) => {
        transferArrayItem(this.dnd.data, [], 0, 0);
      });
    }
    this.todo[i] = this.dnd.data;
  }

stackblitz