Building Tree structure Angular 2

Question

I am trying to build tree structure using angular 2 with a basic parent-child concept.

component.html template looks like below:

<li class="nav-item " *ngFor="let dir of directories">
    <a href="javascript:;" class="nav-link nav-toggle">
        <i class="fa fa-clock-o"></i>
        <span class="title">{{ dir.name }}</span>
        <span class="arrow"></span>
    </a>
    <ul class="sub-menu" *ngFor="let file of directories.child">
        <li class="nav-item  ">
            <a href="#" class="nav-link ">
                <span class="title">{{file.name}}</span>
            </a>
        </li>
        <navigation-bar [directories]="dir.child"></navigation-bar>
     </ul>
</li>

component.ts file :

import { Component, Input } from '@angular/core';
@Component({
    selector: 'navigation-bar',
    templateUrl: './app/home/navigationBar.component.html',    
})

export class NavigationBarComponent {
    @Input() directories: Array<Tree>;      
}

export class Tree{
    directories: any;
    constructor()
    {
        this.directories = [
        {
            name: 'parent1',
            child: [{
                name: 'child1',
                child: []
            },
            {
                name: 'child2',
                child: []
            }]
        },
        {
            name: 'parent2',
            child: {
                name: 'child1',
                child: []
            }
        },
        {
            name: 'parent2',
            child: [{
                name: 'child1',
                child: []
            },
            {
                name: 'child2',
                child: []
            }]
        }];
    }    
}

But it always renders the parent nodes only.
Don't know where I am doing wrong! I am almost blank now. Any suggestion, please...

put dir.child instead of directories.child in the second ngFor — Araz Shamsaddinlouy
– Araz Shamsaddinlouy, Commented Jul 28, 2017 at 13:37

Vivek Doshi · Accepted Answer · 2017-07-28 13:38:21Z

3

Change this line

<ul class="sub-menu" *ngFor="let file of directories.child">

with

<ul class="sub-menu" *ngFor="let file of dir.child">

answered Jul 28, 2017 at 13:38

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

1 Comment

Vivek Doshi Over a year ago

@VigneshwaranMarkandan, Glad to here that ,Will you please also accept the answer ?

J-R Choiniere · Accepted Answer · 2017-07-28 13:39:40Z

2

The problem is in your second loop in html, You iterate through directories. You have to iterate through the parent like this

<ul class="sub-menu" *ngFor="let file of dir.child">

answered Jul 28, 2017 at 13:39

J-R Choiniere

7047 silver badges19 bronze badges

Collectives™ on Stack Overflow

Building Tree structure Angular 2

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related