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?
Share Improve this question asked Nov 29, 2017 at 16:51 StepUpStepUp 38.2k16 gold badges92 silver badges157 bronze badges 3-
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
Reset to default 4The 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.