How to write reusable template which can go through all nested data and display nested lists in HTML

Question

I am looking for some solution to make reusable template which can be iteratate to all nested data and display the content in list.

let data = [

      {
         "label":"test1",
         "hierarchy":[
            {
               "label":"test11",
            }
         ]
      },
      {
         "label":"test2",
         "hierarchy":[
            {
               "label":"test21",
               "hierarchy":[
                  {
                     "label":"test211",
                     "hierarchy":[
                        {
                           "label":"test2111",
                           "hierarchy":[
                              {
                                 "label":"test21111",
                              }
                           ]
                        }
                     ]
                  }
               ]
            }
         ]
      },
      {
         "label":"test3",
         "hierarchy":[
            {
               "label":"test31",
               "hierarchy":[
                  {
                     "label":"test311",
                     "hierarchy":[
                        {
                           "label":"test3111",
                           "hierarchy":[
                              {
                                 "label":"test31111",
                              }
                           ]
                        }
                     ]
                  }
               ]
            }
         ]
      },
      
   

]

<div>
  <div>
  <li *ngFor="let viewList of data;  >
<ul class="nested">
                  <li *ngFor="let subAncesstorList of viewList.hierarchy; let j = index">
                    <label style="margin: 0" class="labelhover">
                      {{ subAncesstorList.label }} 
                    </label>
                    
                    <div  *ngIf="subAncesstorList.hierarchy">
                      <ul class="nested">
                          <li  *ngFor="let nestedsubAncesstorList of subAncesstorList.hierarchy; let k = index">
                            <label style="margin: 0" class="labelhover" >
                              {{ nestedsubAncesstorList.label }} 
                            </label>
                            <div  *ngIf="nestedsubAncesstorList.hierarchy">
                              <ul class="nested">
                                  <li  *ngFor="let nestedsubAncesstorList1 of nestedsubAncesstorList.hierarchy; let k = index">
                                    <label style="margin: 0" class="labelhover">
                                      {{ nestedsubAncesstorList1.label }} 
                                    </label>
                                    <div  *ngIf="nestedsubAncesstorList1.hierarchy">
                                      <ul class="nested">
                                          <li  *ngFor="let nestedsubAncesstorList2 of nestedsubAncesstorList1.hierarchy; let k = index">
                                            <label style="margin: 0" class="labelhover" >
                                              {{ nestedsubAncesstorList2.label }} 
                                            </label>
                                            <div  *ngIf="nestedsubAncesstorList2.hierarchy">
                                              <ul class="nested">
                                                  <li  *ngFor="let nestedsubAncesstorList3 of nestedsubAncesstorList2.hierarchy; let k = index">
                                                    <label style="margin: 0" class="labelhover" >
                                                      {{ nestedsubAncesstorList3.label }} 
                                                    </label>
                                                  </li>
                                              </ul>
                                            </div>
                                          </li>
                                      </ul>
                                    </div>
                                  </li>
                              </ul>
                            </div>
                          </li>
                      </ul>
                      
                    </div>
                    
                  </li>
                 </ul>
  </li>
                 
               </div>
               </div>

How I can make loop which will display the nested list and with the minimal HTML code?

I have tried the plain method where I check the hierarchy exists or not but it will not support dynamic data.

Answer 1

You can use ng-template for such data as follow

<div *ngFor="let node of data">
  <ng-container *ngTemplateOutlet="nodeTemplate; context:{$implicit: node}"></ng-container>
</div>

<ng-template let-node #nodeTemplate>
  <ul class="nested">
    <li>
      <label style="margin: 0" class="labelhover">
        {{ node.label }}
      </label>
      <div *ngIf="node.hierarchy">
        <ng-template ngFor let-child [ngForOf]="node.hierarchy">
          <ng-container *ngTemplateOutlet="nodeTemplate; context:{$implicit: child}"></ng-container>
        </ng-template>
      </div>
    </li>
  </ul>
</ng-template>