Angular2 UL/LI JSON-tree recursive in ngFor

Question

I'd like to convert JSON-trees into unordered lists in Angular2. I know the recursive directive solution from Angular1 and I am pretty sure the solution in Angular2 will be recursive too.

    [
        {name:"parent1", subnodes:[]},
        {name:"parent2", 
            subnodes:[
                    {name:"parent2_child1", subnodes:[]}
                 ],
        {name:"parent3", 
            subnodes:[
                    {name:"parent3_child1", 
                        subnodes:[
                                {name:"parent3_child1_child1", subnodes:[]}
                             ]
                    }
                 ]
        }
    ]

to this unordered list

<ul>
    <li>parent1</li>
    <li>parent2
        <ul>
            <li>parent2_child1</li>
        </ul>
    </li>
    <li>parent3
        <ul>
            <li>parent3_child1
                <ul>
                    <li>parent3_child1_child1</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

using Angular2 and ngFor. Anyone got an idea?

http://stackoverflow.com/questions/35647365/how-to-display-json-object-using-ngfor shows how to iterate over JSON. I guess you need a component wrapping the `ngFor` to be able to use it recursive. — Günter Zöchbauer, Mar 01 '16 at 21:31
There is a tree component in PrimeNG you can check, it uses another component called p:treeNode internally that does the recursion. http://www.primefaces.org/primeng/#/tree — Cagatay Civici, Mar 15 '16 at 15:52

score 47 · Answer 1 · edited May 03 '19 at 11:32

47

You don't need to make a new tree-view component to do this, you can simply use this pattern in any of your templates:

If your data array was public property list of your component:

<h1>Angular 2 Recursive List</h1>
<ul>
  <ng-template #recursiveList let-list>
    <li *ngFor="let item of list">
      {{item.name}}
      <ul *ngIf="item.children.length > 0">  <!-- item.subnodes.length -->
        <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
      </ul>
    </li>
  </ng-template>
  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container>
</ul>

Here's a gist.

edited May 03 '19 at 11:32

Sanoj_V

2,936
1
12
28

answered May 07 '17 at 20:25

arniebradfo

1,141
11
18

1

Very similar to the angular 1 recursive template solution. Nice and clear – ozkary Jun 25 '17 at 00:45
There's a way to use a filter in this recursive template? – TiagoA Mar 05 '18 at 15:22
What do you mean by filter? You can use a `*ngIf="filter"` on any of the elements including the ``. – arniebradfo Mar 07 '18 at 18:23
This should be the accepted answer, much better when we have a more complicated view, thank you! – Charles Cavalcante Sep 04 '18 at 19:46
Did not work for me, using angular 6, copy pasted code. Only parent1 parent2, parent3 are displayed. – Ambroise Rabier Feb 27 '19 at 13:12
Can you please create table headers using the same json having nested data like row 1 spaning first level of json , row 2 having secong level of json and row3 having third nested level and so on – Shikha Apr 01 '19 at 07:46

score 34 · Accepted Answer · answered Apr 20 '16 at 19:06

Borrowing from Torgeir Helgevold's post, I came up with this Plunkr. Here's the code:

TreeView Component:

import {Component, Input} from 'angular2/core';

@Component ({
  selector: 'tree-view',
  directives: [TreeView],
  template: `
  <ul>
    <li *ngFor="#node of treeData">
      {{node.name}}
      <tree-view [treeData]="node.subnodes"></tree-view>
    </li>
  </ul>
  `
})
export class TreeView {
  @Input() treeData: [];
}

App Component:

import {Component} from 'angular2/core';
import {TreeView} from './tree-view.component';

@Component({
    selector: 'my-app',
    directives: [TreeView],
    template: `
    <h1>Tree as UL</h1>
    <tree-view [treeData]="myTree"></tree-view>
    `
})
export class AppComponent { 
  myTree =     [
        {name:"parent1", subnodes:[]},
        {name:"parent2", 
            subnodes:[
                    {name:"parent2_child1", subnodes:[]}
                 ],
        {name:"parent3", 
            subnodes:[
                    {name:"parent3_child1", 
                        subnodes:[
                                {name:"parent3_child1_child1", subnodes:[]}
                             ]
                    }
                 ]
        }
    ];
}

Angular2 UL/LI JSON-tree recursive in ngFor

2 Answers2

Linked