How do I bind the tree structure UI using endless JSON - Angular 8

Question

I have the a JSON structure. It contains children array for each object. Some children array may have a value sometimes it doesn't.

My Question is How do I create a tree view using the following JSON:

this.fileList = [
  {
    "name": "New Folder1",
    "children": [
      {
        "name": "New Folder4",
        "children": [
          {
            "name": "New File",
            "children": []
          },
          {
            "name": "New File",
            "children": []
          }
        ]
      },
      {
        "name": "New Folder7",
        "children": []
      }
    ]
  },
  {
    "name": "New Folder2",
    "children": [
      {
        "name": "File1",
        "children": []
      }
    ]
  },
  {
    "name": "New Folder3",
    "children": [
      {
        "name": "New Folder5",
        "children": [
          {
            "name": "New File",
            "children": []
          },
          {
            "name": "New File",
            "children": []
          }
        ]
      }
    ]
  },
  {
    "name": "File1",
    "children": []
  }
]

And my final output should display like this on my screen. (Note: Those arraow, equals, etc.. are not mandatory. It is just your reference. I just need the tree view only without any material. I need to achieve this by using ngFor, ngIf of some other conditions including the CSS).

->Folder A
    =>Folder B
        --Folder C
        --Folder D
    =>Folder E
        --Folder F
->Folder G
    =>Folder H
        --Folder I
->Folder J
    =>Folder K
    =>Folder L

I hope you guys are understand what I want. Please help me to solve this. Thanks in Advance :)

Answer 1

In Angular You can use template reference to achieve this nested view. here is the code snippet for example:

<ng-template #folderTemplate let-folder>

    <-- BIND DATA OF FOLDER OBJECT-->

    <div *ngIf="folder.children" class="children-folder">
        <!-- Invoke the recursive template. -->
        <ng-template [ngTemplateOutlet]="folderTemplate"
            [ngTemplateOutletContext]="{ $implicit: folder.children }">
            <!--
                HACK: The "$implicit" property of the ngFor context is what will
                be made available to the template ref's implicit let-query binding.
            -->
        </ng-template>
    </div>
</ng-template>
<ng-template [ngTemplateOutlet]="folderTemplate" [ngTemplateOutletContext]="{ $implicit: rootFolderObject }">
</ng-template>

Here rootFolderObject will be your main dataset on each children occurence the template ref will be populated. you can iterate children nested list and bind the data inside foldetTemplate with folder object.