Getting error second time getting to page with ng2-dragula

Question

I am trying to prevent user to move first element of dragulaService, the code works first time without any errors, but when I leave this page and then open it again, I'm getting error.

The code that is causing the error:

constructor(public service:SmartTablesService, private dragulaService:DragulaService) {
    dragulaService.setOptions('nested-bag', {
      revertOnSpill: true,
      moves: function (el:any, container:any, handle:any):any {
        if (handle.className === 'sorting-table-title') {
          return false;
        } else {
          return true;
        }

      }
    });

The error is:

error_handler.js:48 EXCEPTION: Uncaught (in promise): Error: Error in ./SortTableComponent class SortTableComponent_Host - inline template:0:0 caused by: Bag named: "nested-bag" already exists. Error: Bag named: "nested-bag" already exists. at DragulaService.add (http://platform.local:8080/3.chunk.js:1070:19) at DragulaService.setOptions (http://platform.local:8080/3.chunk.js:1099:24) at new SortTableComponent (http://platform.local:8080/3.chunk.js:1311:24)

score 13 · Accepted Answer · answered Dec 16 '16 at 11:58

13

You need to destroy nested-bag in onDestroy lifecycle of your component manually because it's not done automatically:

ngOnDestroy() {
    this.dragulaService.destroy('nested-bag');
}

answered Dec 16 '16 at 11:58

Stefan Svrkota

48,787
9
98
87

score 0 · Answer 2 · answered Jul 02 '21 at 08:49

0

It is better to provide unique DragulaService to every Angular component in which drag & drop is used, instead of sharing common service:

@Component({
   ...,
   providers: [DragulaService],
   ...
})
export class MyComponent {
...
}

Source

answered Jul 02 '21 at 08:49

smartmouse

13,912
34
100
166

Getting error second time getting to page with ng2-dragula

2 Answers2