Angular *ngFor recursive list tree template

any.component.html

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

any.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'yourapp-any',
  templateUrl: './any.component.html' // the magic's in here
})
export class AnyComponent {

  constructor() { }

  // its just list data from here down
  public list = [
    {
      title: 'childless',
      children: []
    },
    {
      title: 'great grandparent',
      children: [
        {
          title: 'childless grandsibiling',
          children: []
        },
        {
          title: 'grandparent',
          children: [
            {
              title: 'childless sibiling',
              children: []
            },
            {
              title: 'another childless sibiling',
              children: []
            },
            {
              title: 'parent',
              children: [
                {
                  title: 'child',
                  children: []
                },
                {
                  title: 'another child',
                  children: []
                },
              ]
            },
            {
              title: 'another parent',
              children: [
                {
                  title: 'child',
                  children: []
                },
              ]
            },
          ]
        },
        {
          title: 'another grandparent',
          children: [
            {
              title: 'parent',
              children: [
                {
                  title: 'child',
                  children: []
                },
                {
                  title: 'another child',
                  children: []
                },
                {
                  title: 'a third child',
                  children: []
                },
                {
                  title: 'teen mother',
                  children: [
                    {
                      title: 'accident',
                      children: []
                    },
                  ]
                },
              ]
            },
          ]
        },
      ]
    },
  ];


}

Awesome, thanks!

But stay in mind:
<li *ngFor="let item of list">
can NOT be changed to something like
<li *ngFor="let item of list.children">.

In the second case, only the first level elements will be shown. (Not deeper levels..)

Thanks man!! works perfect...

Hi, i was working on a similar solution to manage a recursive menu, but i have some problems with routerLinkActive

did you try something similar?

If i add new children in list for dynamic process...the recursive list is crash??

great, thanks man!!, works perfect to trees list 👍

Nice !

Thanks...

Thanks

not working for me getting error "ERROR RangeError: Maximum call stack size exceeded"

not working for me getting error "ERROR RangeError: Maximum call stack size exceeded"

@chethangowda you'll get this error if you don't define the same let-variable as your *ngFor loop

so for example if your *ngFor was:
*ngFor="let navigationItem of navigationItems"
then the variable would be let-navigationItems instead of let-list

Thanks , it work fine but how to make the data two way binded using this ?

The best recursive list tree!!
thank yyouuu!!

Getting the following error using Angular 8:
ERROR TypeError: templateRef.createEmbeddedView is not a function. Any help would be appreciated. Thank you.

Can I add nodes dynamically

Genial...

Really cool. Helped me a lot. That's exactly what I had in mind, but was having trouble with the execution.
Confirmed working in Angular 11

Thanks! Confirmed working in Angular 10+
Awesome example

What if i have 2 components one <parent> another is <child> how to use them inside above code

<ul>
  <ng-template #recursiveList let-list>
    <li *ngFor="let item of list">
     <!--  commented {{item.title}} -->
      <child [item]="item"/>
      <!-- commented <ul *ngIf="item.children.length > 0"> -->
       <template>
            <parent [item]="item"/>
            <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
       </template>
      <!-- commented </ul> -->
    </li>
  </ng-template>
  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container>
</ul> 

please help me how to do that correctly

How do we do this with Angular 8 and up?

Tip: If you don't want to have to add empty children arrays then you can check for item.children in the *ngIf:

<ul *ngIf="item.children && item.children.length > 0">