typescript - Building Tree structure Angular 2 -

i trying build tree structure using angular 2 basic parent-child concept.

component.html template looks 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 } '@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 renders parent nodes only.
don't know doing wrong! blank now. suggestion, please...

change line

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

with

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