tree.treeModel.roots returns []

[alexciesielski]

I want to collapse, expand roots after initialization.

I have initialized a tree with 1 root, which has several children.
I have defined the tree as a ViewChild, and after console.logging the tree I can see in the console, that roots in treeModel is an array of length 1. But after console.logging tree.treeModel.roots I get empty array.

[adamkleingit]

When are you doing console.log?

Have you tried in ngAfterViewInit ?
ngAfterViewInit() {
this.expandRoots()
}

Or in onInitialized callback:
<Tree (onInitialized)="expandRoots()">

By the way, you can use the 'isExpanded' field for initial expand or collapse of nodes.

[alexciesielski]

I have one root, with many children.
I'm debugging this way:

ngAfterViewInit() {
        console.log(this.reportsTree.treeModel);
        console.log(this.reportsTree.treeModel.roots);
    }

It seems like the getter for roots in treeModel is buggy, since the first one prints the treeModel with roots array of length 1, but the second log prints an empty array []

[adamkleingit]

Can you try using the (onInitialized) event instead of ngAfterViewInit?

BTW, the getter is fine. By the time you check the treeModel in the console
the roots are already there.

• Adam Klein http://il.linkedin.com/in/adamklein500
• CTO @ 500Tech.com http://500tech.com/
• AngularJS, ReactJS, NodeJS
• Development, consulting, training and public speaking
• (+972) 52 747 5633

On Tue, Sep 27, 2016 at 10:05 AM, Alexander Ciesielski <
notifications@github.com> wrote:

I'm debugging this way

ngAfterViewInit() {
console.log(this.reportsTree.treeModel);
console.log(this.reportsTree.treeModel.roots);
}

It seems like the getter for roots in treeModel is buggy, since the first
one prints the treeModel with roots array of length 1, but the second log
prints an empty array []

[image: screenshot from 2016-09-27 09-03-36]
https://cloud.githubusercontent.com/assets/17651898/18863416/77c00c7c-8491-11e6-879d-52927cb6d000.png

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#58 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA2SSvdZoD9vSUY8mUfgZBWgZ_Ud4WBGks5quMA1gaJpZM4KDwaa
.

[alexciesielski]

html

<div class="report-tree-container">

    <Tree #reportsTree 
        [nodes]="reports" 
        (onInitialized)="onTreeInitialized($event)"
        (onActiveChanged)="onActiveChanged($event)">
    </Tree>

</div>

ts

@ViewChild('reportsTree') reportsTree: TreeComponent;
@Input() reports: ReportTreeNode[];

onTreeInitialized() {
    console.log(this.reportsTree.treeModel);
    console.log(this.reportsTree.treeModel.roots);
}

export interface ReportTreeNode {
    name: string;

    id?: number;
    children?: ReportTreeNode[];
}

Same result as above

[adamkleingit]

I'm assuming you initialize reports with an empty array, and only later
initialize it with data?
You have 3 options:

1. Use *ngIf to show tree only if reports has data
2. Initialize reports with null instead of empty array.
3. Use onUpdateData event instead of onInitialized (notice that every
   time you update the pointer to reports this event will fire)

• Adam Klein http://il.linkedin.com/in/adamklein500
• CTO @ 500Tech.com http://500tech.com/
• AngularJS, ReactJS, NodeJS
• Development, consulting, training and public speaking
• (+972) 52 747 5633

On Tue, Sep 27, 2016 at 12:34 PM, Alexander Ciesielski <
notifications@github.com> wrote:

html

ts

@ViewChild('reportsTree') reportsTree: TreeComponent;
@input() reports: ReportTreeNode[];

onTreeInitialized() {
console.log(this.reportsTree.treeModel);
console.log(this.reportsTree.treeModel.roots);
}

export interface ReportTreeNode {
name: string;

id?: number;
children?: ReportTreeNode[];

}

Same result as above

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#58 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA2SSm-zDXYQT_D8OvVmb6a2cUQjJv9gks5quOMQgaJpZM4KDwaa
.

[alexciesielski]

reports is initialized by parent component with async pipe.

<app-report-list [reports]="reports | async" (select)="selectReport($event)">
</app-report-list>

Using onUpdateData instead of onInitialized fixed the issue, makes sense! Thanks!