Hello,
I’m using the sortable component to drag and drop tiles around but I’m getting some weird behavior when the content to drag around is dynamic. It works if the tiles are hard coded but if I’m waiting for the list of tiles to come back from an api call, the tiles will render but you can’t move them. To solve this I added the *ngIf below which only displays the div and the smart-sortable once the dashboard items list gets set, but then I ran into another issue when I set disable the sortable by default. I only want to drag and drop when I’m in ‘edit’ mode in the app. Elsewhere when the user clicks on edit, I set this.sortable.disabled = false, however the tiles don’t move. In the example code below I included 2 examples. One is where the tiles are hardcoded and the other is dynamic. The hardcoded tiles work as expected. The tiles are disabled when the page loads, if the user clicks on an edit button, the tiles can be dragged around, but the dynamic tiles are not.
<div>
<div><div *ngIf=”dashboard.items.length > 0″ id=”dashboardTileContainer”></div>
<div>  <smart-sortable</div>
<div>    #sortable</div>
<div>    id=”sortable”</div>
<div>    [dragMode]=”‘item'”</div>
<div>    [mode]=”‘horizontal'”</div>
<div>    [disabled]=”true”></div>
<div></div>
<div>    <ng-container *ngFor=”let item of [{id: ‘123’}, {id: ‘456’}, {id: ‘789’}]”></div>
<div>      <div>{{ item.id }}</div></div>
<div>    </ng-container></div>
<div></div>
<div>    <ng-container *ngFor=”let item of dashboard.items”></div>
<div>      <imat-dashboard-tile *ngIf=”!item.deleted” [item]=”item” [mode]=”dashboardMode”></imat-dashboard-tile></div>
<div>    </ng-container></div>
<div></div>
<div>  </smart-sortable></div>
<div></div></div>
</div>
<div></div>
<div>Hope the above helps to understand what the issue is I’m having. Thanks!</div>