Search code examples
javascripthtmlangulartreeview

angular2-tree-component is not expanded by default

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

enter image description here

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:

enter image description here

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>

enter image description here

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

Solution

  • 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.