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

Question

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!

Naren Murali · Accepted Answer · 2023-12-27 03:24:36Z

It may be because you are missing the track definition, maybe the key has duplicates that is messing up the output, please find below the stackblitz working fine, if this solution does not work please share back the stackblitz with the issue!

@for (item of todo; track item) {
<div class="example-box" cdkDrag>{{item}}</div>
}

ts file

import { Component, ElementRef, ViewChild } from '@angular/core';
import {
  CdkDragDrop,
  moveItemInArray,
  transferArrayItem,
  CdkDrag,
  CdkDropList,
} from '@angular/cdk/drag-drop';

/**
 * @title Drag&Drop connected sorting
 */
@Component({
  selector: 'cdk-drag-drop-connected-sorting-example',
  templateUrl: 'cdk-drag-drop-connected-sorting-example.html',
  styleUrls: ['cdk-drag-drop-connected-sorting-example.css'],
  standalone: true,
  imports: [CdkDropList, CdkDrag],
})
export class CdkDragDropConnectedSortingExample {
  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
      );
    }
  }

  addTodoItem(): void {
    console.log('test');
    this.todo.push('new item');
  }

  addDoneItem(): void {
    this.done.push('new item');
  }
}

stackblitz

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related