I installed and imported angular tree ponent and tried setting it up using the basic example provided following the steps in /

But unfortunately I only see the root node and without expand. Posting the code can someone just see off the bat if anything is wrong? Please help me understand the error I oviously am not able to see.

Module:

import { NgModule } from '@angular/core';
import { TreeModule } from 'angular-tree-ponent';

@NgModule({
  imports: [
    TreeModule
  ],
  declarations: [],
  providers: []
})
export class CourseCreationModule { }

Component:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'app-container',
  templateUrl: './containerponent.html',
  styleUrls: ['./containerponent.css']
})
export class ContainerComponent implements OnInit {
  tree: any;

  constructor() { }

  getCourseDetails() {
      this.createLessonTree();
  }

  createLessonTree() {
    this.tree = [
      {
        id: 1,
        name: 'root1',
        children: [
          { 
            id: 2, 
            name: 'child1'
          },
          { id: 3, 
            name: 'child2'
          }
        ]
      },
      {
        id: 4,
        name: 'root2',
        children: [
          { id: 5, name: 'child2.1' },
          {
            id: 6,
            name: 'child2.2',
            children: [
              { id: 7, name: 'subsub' }
            ]
          }
        ]
      }
    ];
  }

ngOnInit() {
this.route.params.subscribe(params => {
  this.courseId = params['id'];
  this.getCourseDetails();
});
}

HTML:

<tree-root [nodes]="tree"></tree-root>

Believe there are no sytax errors as I can see root1 and root2.

Thank you.

I installed and imported angular tree ponent and tried setting it up using the basic example provided following the steps in https://angular2-tree.readme.io/

But unfortunately I only see the root node and without expand. Posting the code can someone just see off the bat if anything is wrong? Please help me understand the error I oviously am not able to see.

Module:

import { NgModule } from '@angular/core';
import { TreeModule } from 'angular-tree-ponent';

@NgModule({
  imports: [
    TreeModule
  ],
  declarations: [],
  providers: []
})
export class CourseCreationModule { }

Component:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'app-container',
  templateUrl: './container.ponent.html',
  styleUrls: ['./container.ponent.css']
})
export class ContainerComponent implements OnInit {
  tree: any;

  constructor() { }

  getCourseDetails() {
      this.createLessonTree();
  }

  createLessonTree() {
    this.tree = [
      {
        id: 1,
        name: 'root1',
        children: [
          { 
            id: 2, 
            name: 'child1'
          },
          { id: 3, 
            name: 'child2'
          }
        ]
      },
      {
        id: 4,
        name: 'root2',
        children: [
          { id: 5, name: 'child2.1' },
          {
            id: 6,
            name: 'child2.2',
            children: [
              { id: 7, name: 'subsub' }
            ]
          }
        ]
      }
    ];
  }

ngOnInit() {
this.route.params.subscribe(params => {
  this.courseId = params['id'];
  this.getCourseDetails();
});
}

HTML:

<tree-root [nodes]="tree"></tree-root>

Believe there are no sytax errors as I can see root1 and root2.

Thank you.

• javascript
• angular
• typescript
• angular-tree-ponent

Share Improve this question Follow edited May 16, 2019 at 5:03 Benjamin Gruenbaum 277k8989 gold badges519519 silver badges514514 bronze badges asked Sep 25, 2017 at 9:48 Prateek ChoudhuryPrateek Choudhury 30233 gold badges88 silver badges2121 bronze badges 2

• Where are you calling getCourseDetails()? – ronenmiller Commented Sep 25, 2017 at 12:29
• I found a solution to this issue in this post: stackoverflow./questions/47642137/… – Zulukas Commented May 18, 2018 at 19:09

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Added @import '~angular-tree-ponent/dist/angular-tree-ponent.css'; to the src/styles.css file and worked.

I believe you need to call getCourseDetails() in your constructor or in ngOnInit() which should be implemented as the class declaration states.

If this issue occurs after migrating to @circlon/angular-tree-ponent, you should use @import '~@circlon/angular-tree-ponent/css/angular-tree-ponent.css' in your src/styles.css. See also: changelog