Angular: How to render recursive or threaded data with ng-template?

Updated on July 16, 2020     Kisan Patel

How to render recursive or threaded data with ng-template?

For Example:

app.component.ts

import { Component, VERSION } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  root = [
    {
      title: 'Framework',
      children: [
         {
          title: 'Angular',
          children: [
            { title: 'Typescript' },
            { title: 'RxJs' }
          ]
        },
        { title: 'React' }  
      ]
    },
    {
      title: 'Testing',
      children: [
        { title: 'Jest' },
        { title: 'Jasmine' }
      ]
    }
  ];
}

app.component.html

<ul>
  <ng-container
    *ngFor="let node of root"
    [ngTemplateOutlet]="treeNode"
    [ngTemplateOutletContext]="{ $implicit: node }">
  </ng-container>
</ul>

<ng-template #treeNode let-data>
  <li>{{data.title}}</li>
  <ng-container *ngIf="data.children">
    <ul>
      <ng-container
        *ngFor="let child of data.children"
        [ngTemplateOutlet]="treeNode"
        [ngTemplateOutletContext]="{ $implicit: child }">
      </ng-container>
    </ul>
  </ng-container>
</ng-template>