Angular 17 Drag & Drop Container Change Detection not working

I am creating dynamic columns with some items in them at the moment. However, when I try to drag and drop the item, it thinks its still in the same container.

I add a moved event method and see that the id isnt changing which make sense because if (event.previousContainer === event.container) is always true when I drop the item (even though I believe I am hovering over another container). Please help there are no good answers or answers at all ive been searching for hours.

HTML

<div class="kanban-board">
<div *ngFor="let column of columns" class="kanban-column">
<h2>{{ column.title }}</h2>
<div cdkDropList
id="{{column.guid}}"
[cdkDropListData]="column.items"
(cdkDropListDropped)="drop($event)"
class="kanban-column-list"
cdkDropListSortingDisabled
cdkDropListOrientation="vertical">
<div *ngFor="let item of column.items"
cdkDrag
class="kanban-item"
[cdkDragData]=item
(cdkDragMoved)="moved($event)"
>
<p>{{item.name}}</p>
</div>
</div>
</div>
</div>


.ts

moved(event: CdkDragMove){
console.log(event.source.dropContainer.id)
}

// Handle drag-and-drop events
drop(event: CdkDragDrop<any[]>) {
// const previousIndex = this.columns[event.previousContainer.id].items.findIndex((item: any) => item === event.item.data);
const previousIndex = this.columns.findIndex((item: any) => item.guid === event.previousContainer.data[0].guid);

// If the dragged item is dropped in the same container
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, previousIndex, event.currentIndex);
} else {
// If the dragged item is moved from one container to another
transferArrayItem(
event.previousContainer.data,
event.container.data,
previousIndex,
event.currentIndex
);
}

// Send update to the backend
this.kanbanService.updateColumn(event.container.id, event.container.data);
}


.scss

.kanban-board {
display: flex;
justify-content: space-around;
}

.kanban-column {
width: 300px;
height: 100Vh;
margin: 10px;
padding: 10px;
background-color: #f4f4f4;
border-radius: 8px;
}

.kanban-column-list {
display: flex;
flex-direction: column;
height: 100%;
background-color: lightseagreen;
}

.kanban-item {
background-color: #fff;
margin: 8px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: grab;
}

Continue reading...