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 :)

Dheeraj Suthar · Accepted Answer · 2020-04-24 03:54:04Z

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.

answered Apr 24, 2020 at 3:54

Dheeraj Suthar

668 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sakkeer A Over a year ago

Thanks! . I integrated this code. Where do I add JSON structure? I couldn't get it. Can you please explain it. I named the structure as this.fileList.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related