Clarity Tree View - Programatically Routing to Nodes

Question

I have a Tree View that is build dynamically based on a REST call. The full taxonomy is delivered initially, though we may implement lazy loading later.

Does anyone have an example of the following or at least a suggestion on where to begin for the following use cases:

1. I need to route into the tree for a specific node. If the url is .../node2/child3/child5, I need the tree to open to those 3 levels and automatically select that Child5 node item.
2. If opening the tree without routing, have the tree auto-expand the first level and select the first root node.

The Tree that I have build thus far looks like this:

   <clr-tree-node *ngIf="taxonomy">
                <ng-template #recursiveTree let-taxonomy>
                    <clr-tree-node *ngFor="let child of taxonomy">
                        <button (click)="openFile(child, null)" class="clr-treenode-link">
                            {{child.en_name}}
                        </button>
                        <ng-template [clrIfExpanded]="false" *ngIf="child.children?.length > 0">
                            <ng-container *ngTemplateOutlet="recursiveTree; context:{ $implicit: child.children }"></ng-container>
                        </ng-template>
                    </clr-tree-node>
                </ng-template>
                <ng-container *ngTemplateOutlet="recursiveTree; context:{ $implicit: taxonomy }"></ng-container>
            </clr-tree-node>

Answer 1

This is very specialized to your dataset, so in general the issue you need to resolve is knowing which of the clrIfExpanded directives should be set to true. You've got it hard coded to false in the example above. I'd suggest you use a property on the tree itself (like node.expanded) to store the expanded state, set to false by default.

Then, you'd have to inspect the route and params, load your data, parse the tree yourself and change the node.expanded property to true to expand. So to update your example:

<clr-tree-node *ngIf="taxonomy">
            <ng-template #recursiveTree let-taxonomy>
                <clr-tree-node *ngFor="let child of taxonomy">
                    <button (click)="openFile(child, null)" class="clr-treenode-link">
                        {{child.en_name}}
                    </button>
                    <ng-template [clrIfExpanded]="child.expanded" *ngIf="child.children?.length > 0">
                        <ng-container *ngTemplateOutlet="recursiveTree; context:{ $implicit: child.children }"></ng-container>
                    </ng-template>
                </clr-tree-node>
            </ng-template>
            <ng-container *ngTemplateOutlet="recursiveTree; context:{ $implicit: taxonomy }"></ng-container>
        </clr-tree-node>

Then you would have to parse the data structure after it loads from the API, compare the route params against it, and toggle the child.expanded properties for any parts of the route.