Duplicate items in angular material drag and drop

Question

is there some way in angular material to prevent duplicate items in drop list? here is example code

https://stackblitz.com/edit/angular-xjex4y-43l7uh

I try to check if the item already exists in an array with event.currentIndex but this is not correct, because, sometimes I get the wrong value.

event.container.data.included(event.container.data[event.currentIndex])

In stackblitz i need to use .indexOf() insead od .included(), because something not working

so wanna say if you drop some item it should not be copied if already exist right? — jitender

jitender jitender · Accepted Answer · 2019-10-15T11:22:06

You can check current item using previousIndex and check if item already exist or not if exist then return like

 {
      let idx=event.container.data.indexOf(event.previousContainer.data[event.previousIndex]);
      if(idx != -1){
        return;//if item exist
      }
      copyArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex);
    }

working demo

Duplicate items in angular material drag and drop

1 Answers