Updating Async Nodes : Loading... label stuck in the UI

[BrkCoder]

I have a tree which his nodes are update async(using lazy loading). I have notice a strange issue where I want to update the nodes directly by change the data source, then the nodes get updated but the loading label is showing beneath it, although it shouldn't be there at the first place.

Here a reproducing of the problem: (click on change button to reproduce the problem) https://stackblitz.com/edit/angular2-treereadme-async-treechanged-hsdqxb?file=app/app.component.ts

[zmeirinhos]

To fix this you need to create your own loadingTemplate, and check whether the node has children. Like this:

<ng-template #loadingTemplate let-loadingNode>
  <div *ngIf="loadingNode.hasChildren">
    Loading...
  </div>
</ng-template>

[jnesbitt-cfa]

The custom loadingTemplate work-around removes the Loading label but still leaves a big gap between nodes for me.

[PTC-JoshuaMatthews]

I am having the same issue except i am not doing any async data loading. It only seems to affect nodes with no children. I am providing data to the grid, and then I call expandAll on initialized. If I remove the expandAll call and expand the tree manually then many of the nodes revert back to working properly, but some still show "Loading..."

The workaround above works for me... but why is it needed?

EDIT: It turned out the issue for me was that i have multiple item types in my tree, and rarely there were collisions on the id field. It would be nice if the tree allowed an ID function so we could compose multiple fields into a unique id.

[heatsh]

Instead of hasChildren: false, explicitly setting children to [] works change() { this.nodes = [ { name: 'new root', id: 1, location: '12', children: [] } ]; }