Angular Drag and Drop: Arrays Not Updating Dynamically in Template despite Length Changing...

I have implemented Angular Drag and Drop feature following Angular docs https://material.angular.io/cdk/drag-drop/overview#cdk-drag-drop-connected-sorting-group.

HTML looks like:

<div class="example-container flex flex-col text-center h-fit min-h-[10rem] w-[15%] border-2 border-gray-100 rounded-md shadow-md">
<h2 class="text-xl font-semibold mx-auto py-4 bg-green-100 w-full drop-shadow-md">
Monday
</h2>
<div cdkDropList [cdkDropListData]="Monday" class="example-list bg-red-100 min-h-[5rem]" (cdkDropListDropped)="drop($event)">
@for (item of Monday; track item) {
<app-drag-drop-item [title]="item" cdkDrag></app-drag-drop-item>
}
</div>
</div>


and second container:

<div class="example-container flex flex-col text-center h-fit min-h-[10rem] w-[15%] border-2 border-gray-100 rounded-md shadow-md">
<h2 class="text-xl font-semibold mx-auto py-4 bg-blue-100 w-full drop-shadow-md">
Tuesday
</h2>
<div cdkDropList [cdkDropListData]="Tuesday" class="example-list bg-red-100 min-h-[5rem]" (cdkDropListDropped)="drop($event)">
@for (item of Tuesday; track item) {
<app-drag-drop-item [title]="item" cdkDrag></app-drag-drop-item>
}
</div>
</div>


I have two days and taks for each day, that are stored in an array:

Monday = ['Refractoring'];
Tuesday = ['Gym'];


the component.ts file

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
CdkDragDrop,
CdkDrag,
CdkDropList,
CdkDropListGroup,
moveItemInArray,
transferArrayItem,
} from '@angular/cdk/drag-drop';
import { DragDropItemComponent } from '../drag-drop-item/drag-drop-item.component';
import { MatIconModule } from '@angular/material/icon';
import { FormsModule } from '@angular/forms';
import { AddTaskFormComponent } from '../add-task-form/add-task-form.component';
import { TaskService } from '../../../../shared/services/task.service';

@Component({
selector: 'app-dashboard-space',
standalone: true,
imports: [
CdkDropListGroup,
CdkDropList,
CdkDrag,
DragDropItemComponent,
DragDropItemComponent,
MatIconModule,
FormsModule,
AddTaskFormComponent,
CommonModule,
],
templateUrl: './dashboard-space.component.html',
styleUrl: './dashboard-space.component.css',
})
export class DashboardSpaceComponent {
constructor(private e: TaskService) {
this.tasks = this.e.getTasks();
}
tasks: any[];
todo = ['Get to work', 'Pick up groceries', 'Go home', 'Fall asleep'];
Monday = ['Refractoring'];
Tuesday = ['Gym'];
Wednesday = ['Interview'];
Thursday = ['TV'];
Friday = ['Sport'];
done = ['Get up', 'Brush teeth', 'Take a shower', 'Check e-mail', 'Walk dog'];
newTask: string = '';

addNewTask() {
this.todo.push(this.newTask);
}

handleFormSubmission(formData: any) {
this.todo.push(formData);
}

drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(
event.container.data,
event.previousIndex,
event.currentIndex,
);
} else {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex,
);
}
}
}


I follow arrays with:

<h1>{{ Monday }}</h1>
<h1>{{ Tuesday }}</h1>


but i see no changes. So moving an item from one array to another doesnt actuall change the array. But if I do

<h1>{{ Monday.length }}</h1>
` or `
<h1>{{ Tuesday.length }}</h1>


and i move one item for one array to another the length changes properly. So now i have the question, why Angular properly follow and update the length of an array, but doesnt follow, update and then show to actuall value of the arrays.

Continue reading...