Recursive Templates In Angular

This blog demonstrates how can we recursively render a template in Angular.

Introduction 

 

Many times we come across templates in Angular where we have to recursively add UI components. For example, while creating a table of contents, there can be 0 or many sub-sections, as shown in the below picture:

 

 

To achieve such functionality, there are multiple ways in Angular. In this blog, we will discuss ng-template, which is the simplest of all.

 

Solution

 

Create an angular project by following the steps demonstrated here in the Angular documentation.

 

Create a model class tableOfContents.ts for the above recursive structure:

export class TableOfContents {
   title: string;
   index: string;
   children: TableOfContents[];
}

For the above model class, there can be 0 or more child elements for every list item.

Let's create a list of table of contents in app.component.ts and add some data:

export class AppComponent {
   tableOfContents: TableOfContents[] = [
      { index: '1.' , title: 'Topic1' , children: [
         { index: '1.1.', title: 'Topic1.1', children: [] },
         { index: '1.2.', title: 'Topic1.2', children: [] }, ],
      },
      { index: '2.' , title: 'Topic2', children: [
         { index: '2.1.', title: 'Topic2.1', children: [] },
         { index: '2.2.', title: 'Topic2.2', children: [
            { index: '2.2.1.', title: 'Topic2.2.1', children: [] },
            { index: '2.2.2.', title: 'Topic2.2.2', children: [] },
         ],},
       ], },
    ]; } ];
}

The above list can be rendered on UI, using angular ng-template. It takes a list of tabl of contents, and then render the template itseld where it finds a list of children. Below is the code for app.component.html:

<ul>
   <ng-container
   *ngTemplateOutlet="recursiveListTmpl; context:{ list: tableOfContents }"
   ></ng-container>
</ul>

<ng-template #recursiveListTmpl let-list="list">
   <ul *ngFor="let item of list">
      {{item.index}} {{ item.title }}
      <li *ngIf="item.children.length > 0">
         <ng-container
            *ngTemplateOutlet="recursiveListTmpl; context:{ list: item.children }"
         ></ng-container>
      </li>
   </ul>
</ng-template>

<ng-container> passes the list to ng-template with id "recursiveListTmpl". It loops through the whole list. When it triggers the children list with length greater than 0 (line 10), it renders the "recursiveListTmpl" again and pass the list of children. Above code will generate the below show output in browser window.

 

 

Thank you for reading the blog. The source code is attached. Let me know your feedback and suggestions in the comments sections. And yes, you can request other tutorials as well.

 

Good Luck :)