How to create clarity tree view with the api response recursively and lazy loaded

Question

From the api I am getting the response as [ { "target_id": "5626", "name": "AMER", "child": true } ]

Then on click of parent again I will call the api and get the response for AMER region. [ { "target_id": "6004", "name": "Argentina", "child": true }, { "target_id": "5755", "name": "Brazil", "child": true }, { "target_id": "5662", "name": "Canada", "child": true }, { "target_id": "5799", "name": "Chile", "child": true }, { "target_id": "5915", "name": "Colombia", "child": true }, { "target_id": "5931", "name": "Costa Rica", "child": true } ]

I am not getting how to call the api and get the response using obervable and pass in the getChildren method.

I tried the below code

tree-view.component.html

 <clr-tree class="clr-col-12 clr-col-md-4" [clrLazy]="true">
            <clr-tree-node *clrRecursiveFor="let region of regionAMER; getChildren: getAMERRegions"
            [(clrSelected)]="region.selected" [clrExpandable]="region.child">
              {{region.name}}
            </clr-tree-node>
 </clr-tree>

tree-view.component.ts

/* Initially called getRegions on ngOnInit to get all regions */ 
getRegions() {
    this.securityService.getRegions((res: Array<SecurityTargetModel>) => {
      if(res) {
        res.map(el => {
          el.selected = false;
          el.isParent = true;
        })
      }
      this.regionAMER.push(res[0]);
    })
} 
/* Called this method on getChildren to get the child nodes*/

getAMERRegions = (location: SecurityTargetModel) => {
      if(location.child) {
        this.securityService.getSubRegions((res: Array<SecurityTargetModel>) => {
        this.regionAMER
        },location);
      } else {
        return null;
      }
    }

tree-view.service.ts

  getRegions(callback) {
      let url: string = this.configService.getValue('baseURL') + '/intranet' + '/api/studio/security-targeting/data?type=regions';
      return this.apiService.apiCall('GET', url, true)
      .subscribe(res => {
        callback(res);
    });
  }

  getSubRegions(callback,location) {
      let url: string = this.configService.getValue('baseURL') + '/intranet' + '/api/studio/security-targeting/data?type=regions&parent_id=' + location.target_id;
      return this.apiService.apiCall('GET', url, true)
      .subscribe(res => {
        callback(res);
    });
  }

I have added the code for html,ts and service file. Please help with the way I have handle the response of getChildren and create the location tree structure.

My Expectation is

Answer 1

You need to create a recursive component for this. Here this the code sample. Clone this project run npm install and then ng serve --project=recursive-ng-for-component. You can directly read the code how it works.