angular2-tree-component is not expanded by default

Question

I am using angular2-tree-component 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?

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

score 4 · Answer 1 · answered Jul 07 '20 at 15:03

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 component html file:

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

In your component class:

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

Durai · Answer 2 · 2019-05-02T20:47:35.317

3

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.

edited May 02 '19 at 20:47

answered May 02 '19 at 20:31

Durai

505
4
12

Not very reliable way of doing this - you're likely to run into race conditions with the browser. – Simon Curd Jul 07 '20 at 15:04

score 1 · Accepted Answer · answered Nov 29 '17 at 17:20

1

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.

answered Nov 29 '17 at 17:20

Hackerman

12,139
2
34
45

1

It is really strange, but when I click at the button and call this method `tree.treeModel.expandAll`, then it expands. However, if I call this method on `ngInit`, then tree is not expanded. – StepUp Nov 29 '17 at 17:32
If you check this Q&A https://stackoverflow.com/questions/43051335/alternative-to-use-ng-init-in-angular2 it seems that your component needs to implement `OnInit` – Hackerman Nov 29 '17 at 17:38
Man, I am so sorry that I promised your reply as answer. Upvoted! It works, but I should create a button and click at this button to expand all nodes. However, I want to expand tree immediately. – StepUp Nov 29 '17 at 18:04
1

@StepUp You can do this by running `tree.treeModel.expandAll()` in the `(initialized)` event of the tree-root. (https://angular2-tree.readme.io/docs/events#initialized) `` <-- within this method call expandAll – LLai Nov 29 '17 at 19:52
1

@LLai I'll try it tomorrow and will write about results. Thank you very much!:) – StepUp Nov 29 '17 at 20:01
@LLai and Hackerman please, see my question https://stackoverflow.com/questions/47570219/initialized-event-of-angular2-tree-component-is-called-before-loading-data – StepUp Nov 30 '17 at 09:42

angular2-tree-component is not expanded by default

3 Answers3