-
Star
(111)
You must be signed in to star a gist -
Fork
(35)
You must be signed in to fork a gist
-
-
Save arniebradfo/5cf89c362cc216df6fc1d9ca4d536b72 to your computer and use it in GitHub Desktop.
| <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: [] | |
| }, | |
| ] | |
| }, | |
| ] | |
| }, | |
| ] | |
| }, | |
| ] | |
| }, | |
| ]; | |
| } |
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">
Thanks man!! works perfect...