Skip to content

Instantly share code, notes, and snippets.

@nicolae-olariu
Forked from arniebradfo/any.component.html
Created July 18, 2022 07:49
Show Gist options
  • Save nicolae-olariu/99c7c65bf9b55fbc743c16daf698aee8 to your computer and use it in GitHub Desktop.
Save nicolae-olariu/99c7c65bf9b55fbc743c16daf698aee8 to your computer and use it in GitHub Desktop.
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: []
},
]
},
]
},
]
},
]
},
];
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment