fix(sortable): sortable should be refreshed when a new item is added to the array

[Vrael]

Sortable component only shows initial array elements. When a new value is pushed into array, the sortable does not display it.

import { Component } from '@angular/core';

@Component({
  selector: 'custom-item-template-demo',
  templateUrl: './custom-item-template.html'
})
export class CustomItemTemplateDemoComponent {
  public itemStringsLeft: any[] = [
    'Windstorm',
    'Bombasto',
    'Magneta',
    'Tornado'
  ];

  public addItem() {
    this.itemStringsLeft.push("new item");
  }
}

<button type="button" (click)="addItem()">Add</button> 
<template #itemTemplate let-item="item" let-index="index"><span>{{index}}: {{item.value}}</span></template>
  {{itemStringsLeft.length}}
  <pre>{{ itemStringsLeft | json }}</pre>
  <bs-sortable
    [(ngModel)]="itemStringsLeft"
    [itemTemplate]="itemTemplate"
    itemClass="sortable-item"
    itemActiveClass="sortable-item-active"
    placeholderItem="Drag here"
    placeholderClass="placeholderStyle"
    wrapperClass="sortable-wrapper"
  ></bs-sortable>

[Vrael]

Workaround: Call manually to writeValue of the SortableComponent

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'custom-item-template-demo',
  templateUrl: './custom-item-template.html'
})
export class CustomItemTemplateDemoComponent {
  public itemStringsLeft: any[] = [
    'Windstorm',
    'Bombasto',
    'Magneta',
    'Tornado'
  ];

  @ViewChild(SortableComponent) sortableComponent: SortableComponent;
  public addItem() {
    this.itemStringsLeft.push("new item");
    this.sortableComponent.writeValue(this.itemStringsLeft);
  }
}

[dumpingrom]

Thanks @Vrael for this great workaround! I'm wondering if/when this is going to be fixed so the model is properly bound to the bs-sortable though @valorkin :)

[redraushan]

@Vrael I am also having the same issue. Is it going to be fixed or we will have to stick with the workaround? Thanks!

[valorkin]

Sortable is an experimental component, fully reworked version of it is on the way

[ghost]

Using this too. Workaround ok. Thx again for the AWESOME work Valor.

[joingenor]

When I try the workaround @ViewChild(SortableComponent) sortableComponent: SortableComponent;
I get a compiler error: Cannot find name 'SortableComponent'.

[Varshamathukumalli]

@valorkin when is this fully reworked version planned for release?

[valorkin]

This year :)

[Varshamathukumalli]

Thanks for the respone. It would be great if this is released this month hopefully.

[royporter7]

Hi @valorkin
Something you may want to consider implementing in the next release is conditional binding to the [draggable] attribute.

Being able to disable specific elements at a specific index from being rearranged is something that I (and I assume many others) are going to need. :)

[valorkin]

I am planning to decompose DND functionality to allow more flexibility

[mrfx]

When item is removed from the model's array then sortable should be refreshed too or provide method to refresh manually. BTW is there now any workaround?

[Darkeye9]

Another workaround, (and it's just more logical) is to re-create the array each time you want to modify it. Replacing the reference triggers the bs-sortable component refresh mechanism.

    selectChapter(chap: IChapter) {
        this.subtemplate.chapters = [...this.subtemplate.chapters, chap];
    }

    removeChapter(chap: IChapter) {
        this.subtemplate.chapters = this.subtemplate.chapters.filter(v => v.id !== chap.id);
    }

[...]

<bs-sortable
                [(ngModel)]="subtemplate.chapters"
                [itemTemplate]="itemTemplate"
                itemClass="sortable-item st-chapter-item"
                itemActiveClass="sortable-item-active"
                placeholderItem="Drag here"
                placeholderClass="placeholderStyle"
                wrapperClass="st-sortable-wrapper"
            ></bs-sortable>