Angular Material Drag and Drop - How to Add a new Item to the list and have it recognized...

I am trying to utilize the Angular Material Drag and Drop functionality here: https://material.angular.io/cdk/drag-drop/api

I'm following the example here: https://material.angular.io/cdk/drag-drop/examples#cdk-drag-drop-connected-sorting but I am having trouble figuring out how to simply add an item to one of the lists. In the example typescript code, you have something pretty straight-forward here:

todo = ['Get to work', 'Pick up groceries', 'Go home', 'Fall asleep'];

done = ['Get up', 'Brush teeth', 'Take a shower', 'Check e-mail', 'Walk dog'];

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,
);
}
}


Cool, so let's say you just wanted to add a new item to todo. I can just create a function like

addListItem() {
this.todo.push('New Item');
}


This seems to get the item in the list, however something weird happens where if I try to drag that "New Item" UI element from todo -> done it seems to grab the wrong element and it doesn't update the lists correctly. It's as if, once I added "New Item", it no longer has a correct understanding of what's inside the todo list and starts causing all kinds of fun issues.

In the documentation, there appears to be an addItem method that can register the new item to the list, however despite my best efforts, I can't seem to actually get this function to work.

I feel like this is actually pretty straight-forward, but maybe I'm just misunderstanding the documentation here as to where this addItem method needs to be called. Is it within the typescript file? Is there an import I'm missing? Do I actually need to add something inside of the html in order for the addItem to call another function, such as "addListItem()"?

I really appreciate any guidance here, because this Drag and Drop component is extremely sleek and nice. Thanks in advance!

Continue reading...