dragulaModel of ng2-dragula is not working

Question

I am using ng2-dragula for my project andd it worked well for me.but now I want to pass data while dropping an element in the bag.

I searched on internet and found dragulaModel but when I am trying to use it it my code its not working. I have done the following in my template:

<li *ngFor="#comp of record.components | search:searchComp:true" [dragula]='"row-bag"' [dragulaModel]='record.components'>
    <p class="text-center h6" style="font-size:8px;color:blue;font-weight:bold;"> {{comp.name }}</p>                                
</li>

and in my component :

 dragulaService.dropModel.subscribe((value:any[]) => {
        console.log(value);
        this.dragulaService.onDropModel(value.slice(1));
    });
    dragulaService.removeModel.subscribe((value:any[]) => {
        console.log(value);
        this.dragulaService.onRemoveModel(value.slice(1));
    });
    dragulaService.drag.subscribe((value: any[]) => {
        //console.log(`drag: ${value[0]}`);
        this.onDrag(value.slice(1));
    });
    dragulaService.drop.subscribe((value: any[]) => {
        //console.log(`drop: ${value[0]}`);
        this.onDrop(value.slice(1));           
    });
    dragulaService.over.subscribe((value: any[]) => {
        //console.log(`over: ${value[0]}`);
        this.onOver(value.slice(1));
    });
    dragulaService.out.subscribe((value: any[]) => {
        //console.log(`out: ${value[0]}`);
        this.onOut(value.slice(1));
    });
    dragulaService.setOptions('row-bag', {
        copy: true
    });

but I am getting this error:

EXCEPTION: TypeError: Cannot read property '1' of undefined

Answer 1

This error message showing when element dropped from bag "A" with specified model in to bag "B" without model. You need to specify the "dragulaModel" for bag "B" in which you trying to drop the element.

Example:

<div [dragula]='"bag-a"' [dragulaModel]='records' >
...
</div>

<div [dragula]='"bag-b"' [dragulaModel]='records' >
..
</div>