Skip to content

Instantly share code, notes, and snippets.

@arniebradfo

arniebradfo/any.component.html

Last active October 22, 2024 18:40
Show Gist options
  • Save arniebradfo/5cf89c362cc216df6fc1d9ca4d536b72 to your computer and use it in GitHub Desktop.
Save arniebradfo/5cf89c362cc216df6fc1d9ca4d536b72 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. arniebradfo revised this gist May 7, 2017. No changes.
  2. arniebradfo created this gist May 7, 2017.
    12 changes: 12 additions & 0 deletions any.component.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    <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>
    95 changes: 95 additions & 0 deletions any.component.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,95 @@
    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: []
    },
    ]
    },
    ]
    },
    ]
    },
    ]
    },
    ];


    }