Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angular *ngFor recursive list tree template
<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>
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: []
},
]
},
]
},
]
},
]
},
];
}
@Gargamil

This comment has been minimized.

Copy link

@Gargamil Gargamil commented Jun 19, 2017

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..)

@Gwoks

This comment has been minimized.

Copy link

@Gwoks Gwoks commented Apr 12, 2018

Thanks man!! works perfect...

@alexnoise79

This comment has been minimized.

Copy link

@alexnoise79 alexnoise79 commented Apr 24, 2018

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?

@ramnithik

This comment has been minimized.

Copy link

@ramnithik ramnithik commented Aug 3, 2018

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

@edgargomx

This comment has been minimized.

Copy link

@edgargomx edgargomx commented Oct 26, 2018

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

@gmullersoriba

This comment has been minimized.

Copy link

@gmullersoriba gmullersoriba commented Dec 10, 2018

Nice !

@sakthikanth

This comment has been minimized.

Copy link

@sakthikanth sakthikanth commented Jan 29, 2019

Thanks...

@diegosliver

This comment has been minimized.

Copy link

@diegosliver diegosliver commented Jul 23, 2019

Thanks

@chethangowda

This comment has been minimized.

Copy link

@chethangowda chethangowda commented Sep 27, 2019

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

@danielhdz56

This comment has been minimized.

Copy link

@danielhdz56 danielhdz56 commented Oct 30, 2019

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

@amankumar5

This comment has been minimized.

Copy link

@amankumar5 amankumar5 commented Dec 21, 2019

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

@elciospy

This comment has been minimized.

Copy link

@elciospy elciospy commented Feb 10, 2020

The best recursive list tree!!
thank yyouuu!!

@tlavarea

This comment has been minimized.

Copy link

@tlavarea tlavarea commented Feb 28, 2020

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

@Darksoul7878

This comment has been minimized.

Copy link

@Darksoul7878 Darksoul7878 commented Apr 10, 2020

Can I add nodes dynamically

@lreyessandoval

This comment has been minimized.

Copy link

@lreyessandoval lreyessandoval commented May 16, 2020

Genial...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment