ng2-dragula reorder list not able to get

Question

I'm using ng2-dragula package for drag and drop features but once reorder the list items, unable to get the updated array list values. Here the code what I have done.

HTML

      <ul [dragula]='"bag-items"' [dragulaModel]="contactArray">
                  <li *ngFor="let field of contactArray" >
                    <label>{{field.role}}</label>
                 </li>
      </ul>

JS

import { DragulaService   } from "ng2-dragula";

@Component({
  selector: 'app-edit-project',
  templateUrl: './edit-project.component.html',
  styleUrls: ['./edit-project.component.css'],
  providers: [    
      DragulaService
  ]
})

export class ProjectComponent implements OnInit {

constructor(private dragula:DragulaService) {
console.log(this.contactArray)
}

}

when I try to console the contactArray after reordering the list. I still get the default order.

Default order looks like this

A
B
C
D

Once I reorder looks like

D
C
A
B

then tried console.log(this.contactArray), I still get the default order values. expecting the new reorder values.

Can any expert advice please.

Answer 1

You would need to use two-way binding, like this : [(dragulaModel)]="contactArray". Here's the official comments from ng2-dragula doc:

NOTE: v2 changes the behavior of [dragulaModel]. It no longer mutates the arrays you give it, but will shallow clone them and give you the results. Use two-way binding with [(dragulaModel)]="...", or use the DragulaService dropModel and removeModel events to save the new models produced.