title: Building Tree structure Angular 2
body: <p>I am trying to build tree structure using angular 2 with a basic parent-child concept. </p>
  
  <p><strong>component.html template looks like below:</strong></p>
  
  <pre><code>&lt;li class="nav-item " *ngFor="let dir of directories"&gt;
      &lt;a href="javascript:;" class="nav-link nav-toggle"&gt;
          &lt;i class="fa fa-clock-o"&gt;&lt;/i&gt;
          &lt;span class="title"&gt;{{ dir.name }}&lt;/span&gt;
          &lt;span class="arrow"&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class="sub-menu" *ngFor="let file of directories.child"&gt;
          &lt;li class="nav-item  "&gt;
              &lt;a href="#" class="nav-link "&gt;
                  &lt;span class="title"&gt;{{file.name}}&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;navigation-bar [directories]="dir.child"&gt;&lt;/navigation-bar&gt;
       &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><strong>component.ts file :</strong> </p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  @Component({
      selector: 'navigation-bar',
      templateUrl: './app/home/navigationBar.component.html',    
  })
  
  export class NavigationBarComponent {
      @Input() directories: Array&lt;Tree&gt;;      
  }
  
  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: []
              }]
          }];
      }    
  }
  </code></pre>
  
  <p>But it always renders the parent nodes only.<br>
  Don't know where I am doing wrong! I am almost blank now. Any suggestion, please...</p>