Display nested list in angular 2

Question

I want to display nested list. The structure of the list:

[
    {
        name: "Level 1A",
        children: [
            {
                name: "Level 2A",
                children: [
                
                ]
            },
            {
                name: "Level 2B",
                children: [
                    {
                        name: "Level 3A",
                        children: [...]
                    }
                ]
            }
        ]
    },
    {
        name: "Level 1B",
        children: [
            {
                name: "Level 2A"
                children: [...]
            }
        ]
    }
]

As you can see we have items with 2 properties: name and children. It could be nestem many many levels down. The HTML output should be something like this:

<list>
    <list-grup name="Level 1A">
        <list-item name="Level 2A"></list-item>
        <list-item name="Level 2B"></list-item>
    </list-grup>
    <list-grup name="Level 1B">
        <list-item name="Level 2A"></list-item>
    </list-grup>
</list>

The only way i found is to display it like this:

<list>
  <ng-container *ngFor="let item of list">
    <list-group *ngIf="item.children" [item]="item.name">
      <ng-container *ngFor="let item1 of item.children">
        <list-group [item]="item1.name">
          <list-group *ngIf="item1.children" [item]="item1.name">
            <ng-container *ngFor="let item2 of item1.children">
              ...
            </ng-container>
          </list-group>
        </list-group>
      </ng-container>
    </list-group>
  </ng-container>
</list>

But this way is incorrect because I dont want it to be hardcoded because this data will be dynamic. Can you help me find better solution to display this data? It could be done in template or component.

Answer 1

One possible way is to create a component which represents a single Node (name, children)

first the interface:

export interface Node {
  name: string;
  children: Node[];
}

component with one @Input() binding

export class NodeComponent implements OnInit {
  @Input() node: Node;

html

<li>  
    <p>{{node.name}}</p>       
    <ul *ngFor="let item of node.children">
      <app-node [node]="item"></app-node>
    </ul>
</li>

begin the whole process from:

<ul>
  <ng-container *ngFor="let item of list">
    <app-node [node]="item"></app-node>
  </ng-container>
</ul>

Working Stackblitz

Version with Expand/Collapse support