Angular-tree-component: Tree is not rendering

[taiducnguyen]

Hi there,
I don't know why the tree is just render root, the children are not on version 6.0.1 and up. It works well on v3.2.3. Could you please help to check?

• This is my code:
  import { Component, OnInit, OnChanges } from '@angular/core';
  import { ITreeOptions } from 'angular-tree-component';

declare var require: any;
@Component({
selector: 'app-async',
template: <tree-root #tree [options]="options" [nodes]="nodes"></tree-root> ,
styles: []
})
export class StartPageComponent implements OnInit {
ngOnInit() {
}
options: ITreeOptions = {
getChildren: this.getChildren.bind(this)
};

  nodes: any[] = [];

  asyncChildren = [
    {
      name: 'child1',
      hasChildren: true
    }, {
      name: 'child2'
    }
  ];

  constructor() {
    this.nodes = [
      {
        name: 'root1',
        children: [
          { name: 'child1' }
        ]
      },
      {
        name: 'root2',
        hasChildren: true
      },
      {
        name: 'root3'
      }
    ];
  }

  getChildren(node: any) {
    const newNodes = this.asyncChildren.map((c) => Object.assign({}, c));

    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(newNodes), 1000);
    });
  }

}

• It renders as bellow:
  

[taiducnguyen]

This bug happen with webpack, angular cli works well.

[ritikaChauhan]

@taiducnguyen , could you please elaborate? I am facing the same issue. What steps should I take to rectify this?

[khemebuen]

I am also having the same issue

[Daevor]

Has anyone figured out how to get around this? I'm also stuck on this issue.

[keathmilligan]

Make sure you have imported the stylesheet in your main styles.scss or equivalent:

@import "~angular-tree-component/dist/angular-tree-component.css";

[jdewell]

We just upgraded to angular 5 and angular-tree-component version 7 and our trees do not render. Only the root nodes.
Update: @keathmilligan suggestion resolved our problem. Thanks!!

[adamkleingit]

Yes you should import the CSS. Thanks @keathmilligan

[neural22]

The problem was the missing import also in my case, many thanks @keathmilligan

[mitesh293]

This bug happen with webpack, angular cli works well.

@taiducnguyen i am facing the same issue with angular 7 and angular-tree-component v8.3.0 ,can you please help me,how to fix.
Any suggestion for fix are welcome and appreciated for anyone

[Alantom10]

I have the same problem and i added the css import also but still continue to have the problem.
But for me the import line is @import '~@circlon/angular-tree-component/css/angular-tree-component.css';
and not @import '~@circlon/angular-tree-component/dist/angular-tree-component.css'; since dist is not an available location in the library.
I don't know if that makes a difference though