I am using angular2-tree-ponent and want to show already expanded tree. Now my tree is not expanded after loading page:

My HTML looks like this:

<div class="sidebartree-ul" [ngStyle]="{'background-color': 'white'}">
    <tree-root class="panel-body " [nodes]="Items" [options]="customTemplateStringOptions" 
        #tree >
        <ng-template #loadingTemplate>
            Loading..
        </ng-template>

        <ng-template #treeNodeTemplate let-node>
            <tree-node-expander [node]="node"></tree-node-expander>
            <span *ngIf="node?.data?.expanded === true " title="{{node.data.subTitle}}">
                <b> {{ node.data.name }} {{ childrenCount(node) }} </b></span>            
            <span *ngIf="!node?.data?.expanded === true" title="{{node.data.subTitle}}">
                <b>{{ node.data.name }} {{ childrenCount(node) }}  </b></span>            
        </ng-template>
        <ng-template #loadingTemplate>Loading, please hold....</ng-template>
    </tree-root>
</div>

I see an example from github and I've set isExpandedField to expanded, however, children fields are not expanded:

customTemplateStringOptions: any = {
        isExpandedField: 'expanded',
        idField: 'uuid',
        nodeHeight: 23        
    }

public Items: any[];

And my data for TreeView looks like this:

If I add <tree-node-expander [node]="node"></tree-node-expander> and click at it, then it expands, but it is now what I want:

<tree-root class="panel-body " [nodes]="Items" 
    [options]="customTemplateStringOptions" #tree >
    ...

    <ng-template #treeNodeTemplate let-node>
        <tree-node-expander [node]="node"></tree-node-expander>
        ...
    </ng-template>
    <ng-template #loadingTemplate>Loading, please hold....</ng-template>
</tree-root>

Does anybody know what I am doing wrong to expand all children immediately?

I am using angular2-tree-ponent and want to show already expanded tree. Now my tree is not expanded after loading page:

My HTML looks like this:

<div class="sidebartree-ul" [ngStyle]="{'background-color': 'white'}">
    <tree-root class="panel-body " [nodes]="Items" [options]="customTemplateStringOptions" 
        #tree >
        <ng-template #loadingTemplate>
            Loading..
        </ng-template>

        <ng-template #treeNodeTemplate let-node>
            <tree-node-expander [node]="node"></tree-node-expander>
            <span *ngIf="node?.data?.expanded === true " title="{{node.data.subTitle}}">
                <b> {{ node.data.name }} {{ childrenCount(node) }} </b></span>            
            <span *ngIf="!node?.data?.expanded === true" title="{{node.data.subTitle}}">
                <b>{{ node.data.name }} {{ childrenCount(node) }}  </b></span>            
        </ng-template>
        <ng-template #loadingTemplate>Loading, please hold....</ng-template>
    </tree-root>
</div>

I see an example from github and I've set isExpandedField to expanded, however, children fields are not expanded:

customTemplateStringOptions: any = {
        isExpandedField: 'expanded',
        idField: 'uuid',
        nodeHeight: 23        
    }

public Items: any[];

And my data for TreeView looks like this:

If I add <tree-node-expander [node]="node"></tree-node-expander> and click at it, then it expands, but it is now what I want:

<tree-root class="panel-body " [nodes]="Items" 
    [options]="customTemplateStringOptions" #tree >
    ...

    <ng-template #treeNodeTemplate let-node>
        <tree-node-expander [node]="node"></tree-node-expander>
        ...
    </ng-template>
    <ng-template #loadingTemplate>Loading, please hold....</ng-template>
</tree-root>

Does anybody know what I am doing wrong to expand all children immediately?

• javascript
• html
• angular
• treeview

• It seems that you just need to call the method tree.treeModel.expandAll() – Hackerman Commented Nov 29, 2017 at 16:58
• @Hackerman could you be very kind to show how can I get tree to call this function: tree.treeModel.expandAll()? – StepUp Commented Nov 29, 2017 at 17:02
• 2 angular2-tree.readme.io/docs , it's the method that gets called in the demo, by the Expand All button. – Hackerman Commented Nov 29, 2017 at 17:07

3 Answers 3

The angular lifecycle isn't reliable for expanding the tree. The more reliable way is to use the (initialized) event on the tree root.

Docs: https://angular2-tree.readme.io/docs/events#initialized

In your ponent html file:

<tree-root (initialized)="onTreeLoad()">

In your ponent class:

onTreeLoad() {
    this.tree.treeModel.expandAll();
}

I ran into the same problem. I used the below hack which i learned it from using ngx-toastr in ngOnInit. I worked for me. Not sure why ngAfterViewInit is not working for me.

ngAfterViewInit() {
  setTimeout(() => this.tree.treeModel.expandAll(), 500)
}

I had to adjust the waiting time to make it work. by animation, you can make it for expansion.

I am still new to angular to provide in depth explanation. Let's see if this works for you and someone provide explanation.

You just need to call the expandAll method. You can check the demo, here
https://angular2-tree.readme.io/docs

The Expand All button calls the tree.treeModel.expandAll() method.