Child node not binding in HTML template angular 2 tree view

Question

Hi here am creating a tree view in angular2 .I am able to get all the objects ie;parent and child .When running the app,instead of child node parent is coming.While debugging i can able to find the child.not in html.Please let me know how to bind the child nodes

please find the attached zip

here binding coming -listcompnt.ts

Hide Expand Copy Code

import {Component, OnInit}	from '@angular/core'; import {ContentNode}		from './content-node'; import {ContentService}		from './content.service'; import {Input} from '@angular/core';   @Component({ 	selector: 'content-list', 	//directives: [ContentListComponent], 	template: ` 		<ol class="tree"> 			<li *ngFor="let contentNode of contentNodes"  class="tree__branch" [ngClass]="{'tree__branch--has-children': contentNode.HasChildren}"> 				<a *ngIf="contentNode.HasChildren" (click)="contentNode.toggle=!contentNode.toggle" class="toggle">{{ !!contentNode.toggle ? '-' : '+' }}</a>  				{{ contentNode.Name }}   			  <content-list *ngIf="contentNode.toggle" [startingNode]="contentNode.categories"></content-list> 			</li> 		</ol> 		<div class="error" *ngIf="errorMessage">{{errorMessage}}</div>		 	` }) export class ContentListComponent implements OnInit { 	 	constructor (private _contentService: ContentService) {} 	 	errorMessage: string; 	 	@Input('startingNode') 	//treeData: []; 	private _startNodeId: number; 	 	contentNodes: ContentNode[]; 	 	ngOnInit() {  		this.getContentNodes(); 	} 	 	getContentNodes() { 		this._contentService.getContentNodes(this._startNodeId) 			.subscribe( 				contentNodes => this.contentNodes = contentNodes, 				error =>  this.errorMessage = <any>error 			); 	} 	 	toggleBranch(branchId:number){ 		console.log('branchId: ' + branchId); 	} }

my json.ts

Hide Expand Copy Code

    [     {       "Id":1054,       "Name": "Market 1",       "HasChildren":true,       "categories"       : [           {             "Id":1055,             "Name": "inside market 1",              "HasChildren":false,             "categories": []           },           {             "Id":1056,             "Name": "inside market 1",              "HasChildren":false,                        "categories": []           },                 {                   "Id":1057,                   "Name": "inside market 1",                    "HasChildren":false,                   "categories": []                 },                 {                   "Id":1058,                   "Name": "inside market 1",                    "HasChildren":false,                   "categories": []                 }               ]           },               {         "Id":1058,          "HasChildren":true,       "Name": "Market 2",       "categories": [           {               "Id":1059,          "HasChildren":true,             "Name": "inside market 2",             "categories": []           },      {               "Id":1060,          "HasChildren":true,             "Name": "inside market 2",             "categories": []           }           ]     }  ]  

app.compont.ts

Hide Copy Code

import {Component}            from '@angular/core'; import { HttpModule } from '@angular/http'; //import {HTTP_PROVIDERS}			  from '@angular/http'; import {ContentNode}			    from './content-node'; import {ContentListComponent}	from './content-list.component'; import {ContentService}		  	from './content.service'; import { Http } from '@angular/http' //import {provide}				      from '@angular/core'; //import {XHRBackend}				    from '@angular/http'; import { NgModule } from '@angular/core';    @Component({ 	selector: 'my-app', 	template: ` 		<h1>MarketTree</h1> 		<content-list [startingNode]="1054"></content-list> 		 	`, 	//directives:[ContentListComponent], 	providers: [ 	   		ContentService 	] }) export class AppComponent { }