Asynchronous Tree component. Root node definition without using TUI_TREE_START

[ne-alex]

Hi,

Inside the Asynchronous example of the Tree component you're using TUI_TREE_START provider to define the root node of the tree. Is it actually possible or any ideas how it could be currently achieved to define the root node from e.g. parent component's input instead of injection token.

Currently if I use

<tui-tree
  [childrenHandler]="childrenHandler"
  [content]="content"
  [map]="map"
  [tuiTreeController]="false"
  [value]="root"
  (toggled)="onToggled($event)"
/>

<ng-template #content let-item>
  <tui-loader *ngIf="item === loading; else text" class="loader" />
  <ng-template #text>{{ item.text }}</ng-template>
</ng-template>

where root is an input of the component since it is received from an API.

Current behavior is that the Tree component displays an expected root node content and even requests API to get correct child nodes based on the root data when toggling the root node. But the children are not assigned to the root.

(Note: subscription to TuiTreeService data$ has been initiated inside the parent component, otherwise root component doesn't initiate API request)

[waterplea]

Hi, sorry for the long delay. Yeah, it's a bit harder than I hoped it would be. Mainly because root node is required for the service so recreating root node would require recreating service too. We could probably change root node to signal/observable so it can be updated in real time, but it's not really expected for the tree to change its root node dynamically. What you can do is provide it in the parent and only create the tree once it's available:
https://stackblitz.com/edit/angular-2e11ynqh

[ne-alex]

Thank @waterplea. Looks good to me. It's better solution than I've temporary implemented :) I'm gonna try it in a real project soon.

P.S. Based on your solution, I've created a small bug for the async tree behavior: #10406 with the topmost node.