Angular Drag and drop is not working if using *ngFor in cdkDropList - drag-and-drop

Question

I was tried to using angular material drag and drop and I was looping through cdkDropList container. I'm not able to drag the items from Catalogue to (to do )list. If I'm not using any loop then it's working fine.
Here is my stackblitz link
I tried without loop that is working fine
<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo" [cdkDropListConnectedTo]="[done]" [id]="item"
class="column-list" (cdkDropListDropped)="drop($event)"
<div class="column-box" [ngClass]="[(item.Name=='R') ?'Red':'',(item.Name=='G') ?'Green':'',(item.Name=='B') ?
'Blue':'',(item.Name=='Y') ?'Yellow':'',(item.Name=='O') ?'Orange':'']" *ngFor="let item of items3" cdkDrag cdkDragLockAxis="y">
{{item.Name}}</div>
</div>
but if I'm adding this *ngFor it's not working
<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo" [cdkDropListConnectedTo]="[done]" [id]="item"
class="column-list" (cdkDropListDropped)="drop($event)" *ngFor="let item of signalContainer">
<div class="column-box" [ngClass]="[(item.Name=='R') ?'Red':'',(item.Name=='G') ?'Green':'',(item.Name=='B') ?
'Blue':'',(item.Name=='Y') ?'Yellow':'',(item.Name=='O') ?'Orange':'']" *ngFor="let item of items3" cdkDrag cdkDragLockAxis="y">
{{item.Name}}</div>
</div>

Answer 1

COMPONENT.TS
import {Component} from '#angular/core';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '#angular/cdk/drag-drop';
#Component({
selector: 'cdk-drag-drop-connected-sorting-example',
templateUrl: 'cdk-drag-drop-connected-sorting-example.html',
styleUrls: ['cdk-drag-drop-connected-sorting-example.css'],
})
export class CdkDragDropConnectedSortingExample {
initialSkeleton = new Array(5);
done = [
'A','B','C','D','E'
];
drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
debugger;
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
event.container.data[event.currentIndex] = event.previousContainer.data[event.previousIndex];
}
}
}
HTML
<div class="example-container">
<h2>To do</h2>
<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="initialSkeleton" [cdkDropListConnectedTo]="[doneList]" class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of initialSkeleton" cdkDrag>
<div class="child" >{{item }}</div>
</div>
</div>
</div>
<div class="example-container">
<h2>Done</h2>
<div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done" [cdkDropListConnectedTo]="[todoList]" class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
</div>
</div>
I've modified the code now you will be able to drag and drop items in the for loop. Hope it answers your question.