4

I installed and imported angular tree component 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-component';

@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.component.html',
  styleUrls: ['./container.component.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.

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

3 Answers 3

6

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

Sign up to request clarification or add additional context in comments.

1 Comment

or you can add this to your angular.json styles property "styles": ["./node_modules/angular-tree-component/dist/angular-tree-component.css","src/styles.css"]
1

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

6 Comments

That is not required the function gets invoked. As I had said syntax might not be a problem as the tree component is being called and I can see the root nodes being displayed. The problem is the children are not being appended.
Why would you see it if you do not invoke the constructing function?
Sorry for the confusion have invoked the code from ngOnInit which I havn't added in the code.
any solution for this issue! I am facing same
@NIrav Modi, check out the solution on stackoverflow.com/questions/47642137/… I had to include @import '~angular-tree-component/dist/angular-tree-component.css'; to my src/styles.css file to get it to work.
|
0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.