Utilizing the angular2-tree-component, my goal is to display an already expanded tree. According to Angular docs, the initialized event should be used for expanding the tree after the data has been received:
This event triggers after the tree model has been created. It is useful for performing actions immediately on initialization, such as expanding or activating specific nodes. The tree model can be accessed using a reference, as explained in the API section.
However, despite following the instructions, the tree does not expand after being rendered:
https://i.stack.imgur.com/JX5ZO.png
The data is loaded within the ngOnInit() method:
ngOnInit() {
this.getApiFunction(request, item)
.subscribe(x => {
console.log('before adjusting data');
this.adjustDataToTree(x);
console.log('after adjusting data');
});
}
adjustDataToTree(reports:any[]){
//cycle to process data for treeView
for(...){...}
this.Items.length = 0;
this.Items = data from above cycle;
}
Code snippet handling the initialized event:
onTreeLoad(){
//alert('on Tree Load');
this.tree.treeModel.expandAll();
console.log('this.tree.treeModel.expandAll() is called!:)');
}
This is how my tree is structured:
<tree-root (initialized)="onTreeLoad()" [nodes]="Items"
[options]="customTemplateStringOptions" #tree>
<ng-template class="expand-tree" #treeNodeTemplate let-node>
<span (click)="currToggleExpanded(node)" *ngIf="node?.data?.expanded === true"
title="{{node.data.subTitle}}">{{ node.data.name }} {{ childrenCount(node) }}
</span>
<span (click)="currToggleExpanded(node)" ngIf="!node?.data?.expanded === true"
title="{{node.data.subTitle}}">{{ node.data.name }} {{ childrenCount(node) }}
</span>
</ng-template>
</tree-root>
The initialized event is triggered before the data is actually loaded, evident from the order of logs:
https://i.stack.imgur.com/3sIIX.png
What am I missing or why is the initialized event firing before the data is loaded into the treeview?