DragulaModel not working with dynamic data

Question

i´m using ng2-dragula and mi components var are not updating after drag and drop with it when my data is obtained by AJAX.

This is my html code:

    <div class='wrapper'>
  <div class='container' [dragula]='"another-bag"' [dragulaModel]='many'>
    <div *ngFor='let text of many' [innerHtml]='text'></div>
  </div>
  <div class='container' [dragula]='"another-bag"' [dragulaModel]='many2'>
    <div *ngFor='let text of many2' [innerHtml]='text'></div>
  </div>
</div>

And this is my component.ts:

public many: Array<string> = ['The', 'possibilities', 'are', 'endless!'];
  public many2: Array<string> = ['Explore', 'them'];

  constructor(private dragulaService: DragulaService) {
    dragulaService.dropModel.subscribe((value) => {
      this.onDropModel(value.slice(1));
    });
    dragulaService.removeModel.subscribe((value) => {
      this.onRemoveModel(value.slice(1));
    });
  }

  private onDropModel(args) {
    let [el, target, source] = args;
    // do something else
  }

  private onRemoveModel(args) {
    let [el, source] = args;
    // do something else
  }

In this example, the DragulaModel is working because the data is an static array. But when I populate this array with an ajax, the dragulaModel not working. For example, i´m using a method who does the ajax and then subscribe the data in my many or many2 var.

Thanks a lot!

Answer 1

The problem is that the init of [dragulaModel] is getting bound to many whose value is still undefined before the ajax value has arrived. You can add *ngIf="many" to your wrapper to ensure many has a value before the dragula init.