How to create a lazy load treeview in Angular 7

I am creating a TreeView using Angular and the scenario of creating treeview is I have different different API for each level means if I'm click on one of the parent level node then only child node should generate for that particular node only and so on for further level and every child node list is coming from API

Now the issue is when I'm creating a nested list to created tree view, on the click of any node. Child node is generating for that node and others nodes also.

Here is my code.

<ul>
            <li *ngFor="let item of companyList" [id]="item.id">
              <span (click)="getLocation(item)"></span>
              <ul>
                <li *ngFor="let loc of loactionData" [id]="loc.id">
                  <span (click)="getDepartment(loc)"></span>
                  <ul>
                    <li *ngFor="let depart of deaprtmentData">
                      <span (click)="getEmpStatus(depart)"></span>

                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>

Note: Every list is coming from separate API and these click event helps to call API.

Please help me with the above issue thanks in advance.

from How to create a lazy load treeview in Angular 7

How to create a lazy load treeview in Angular 7 2019-03-18T02:24:00-07:00 Rating: 4.5 Diposkan Oleh: Admin