Angular-tree-component: tree.treeModel.expandAll() Not working for 'angular2-tree-component'

[AbhiThakare]

Hi @adamkleingit

I have been enjoying using angular2-tree-component for my tree implementation.

I haven't seen any problems until I tried to expandAll()

Here is the webpackbin URL with issue reproduce
https://www.webpackbin.com/bins/-KuZsrLVxHHv40hpsVlk

I am using 'angular2-tree-component' v3.1.0

I found

 #tree.treeModel.expandAll()

not working properly for async node structure when I import TreeModule from 'angular2-tree-component'

import { TreeModule } from 'angular2-tree-component';

Ref

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { TreeModule } from 'angular2-tree-component';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TreeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

expandAll() working fine when I import TreeModule from 'angular-tree-component'

import { TreeModule } from 'angular-tree-component';

I m using Chrome Version 60.0.3112.113

I have to use 'angular2-tree-component' in my project, also if you could explain what is difference between 'angular2-tree-component' and 'angular-tree-component' as I found both are working with angular 2 and 4.

Can you please help me here

Thanks!
Regards
Abhi

[crivadavi]

'angular2-tree-component' is the old module, then it was renamed to angular-tree-component. You should use angular-tree-component because this is updated to version 5.0.0 at 2017-01-09 (see the changelog). That is the reason why import TreeModule from angular-tree-component works!

[AbhiThakare]

Thanks @crivadavi

I have updated my code everything working fine now !

[peterennis]

@AbhiThakare - You could close the issue if it is fixed. Saves the maintainer a little work.

[erickyi2006]

I found a different issue for dynamic nodes.
For static nodes, expandAll() works. The problem I found is that when I update the nodes dynamically, I can't expand the updated nodes. I also discovered a work around solution (see below).
FYI, i am using the latest version ( "angular-tree-component": "^7.0.1")

  ngAfterViewInit() {
    this.tree.treeModel.expandAll(); // works first time
  }

  someEvent () {
      this.nodes = [
      {
          id: 1,
          name: 'newRoot1',
          children: [
            { id: 2, name: 'new.child1' },
            { id: 3, name: 'new.child2' }
         ]
      }
      ];
      this.tree.treeModel.expandAll(); // does not work
  }

Here is the work around.

// in html file, add updateData event

  <tree-root #tree [nodes]="nodes" [options]="options" (updateData)= "onUpdateData(tree, $event)">
    <ng-template #treeNodeTemplate let-node let-index="index">
        <span>{{ node.data.name }} 
        </span>
        <span class="tree-node-value">
          {{ node.data.title}}
        </span>
      </ng-template>    
  </tree-root>

// in ts file
  onUpdateData (treeComponent: TreeComponent, $event) {
    console.log ("onUpdateData", treeComponent, $event);
    treeComponent.treeModel.expandAll();
  }

Probably I missed a step somewhere, but the work around works. Maybe the developers can shed a light on why I need to implement this work around.

[evgeni-nabokov]

v7.2.1, these do not work:
neither

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

nor

(initialized)="onInitialized(tree)"

My nodes is being loaded dynamically in the constructor of my component. Then I reassign the nodes property and try to expand.