Angular: tree view from json data

Question

I am new to angular. I want to create a expandable tree in angular 5. I have tried to using Angular-tree-component and ngx-treeview. but the problem with them is they need a json in specif format. is there any library which reads a any type of json and creates a expandable tree ? or do I need to convert my json in the format this npm modules will need it ?

I want to do something like tree-grid-directive(http://khan4019.github.io/tree-grid-directive/test/treeGrid.html) is providing in angular js 1.

You don't need to format, but your text must be valid JSON Format. — Ashish Ratan
– Ashish Ratan, Commented Mar 9, 2018 at 12:45

Alexander Levakov · Accepted Answer · 2018-08-01 07:55:51Z

6

The main point in a tree-view is recursive templates calling. For example:

    <!-- branch -->
    <ng-template let-items="items" #branch>
      <ng-container *ngFor="let item of items">
        <ng-container *ngTemplateOutlet="leaf; context: {item: item}"></ng-container>
      </ng-container>
    </ng-template>
    
    <!-- leaf -->
    <ng-template let-item="item" #leaf>
      <li>
        <span>{{item.content}}</span>
        <ul *ngIf="item.children">
          <ng-container *ngTemplateOutlet="branch; context: {items: item.children}"></ng-container>
        </ul>
      </li>
    </ng-template>

Here "branch" template, with help of *ngTemplateOutlet, refers "leaf" template and vice versa. So it allows to tree to "grow".

Entire, working source code and demo are here

edited Aug 1, 2018 at 7:55

answered Jul 30, 2018 at 8:25

Alexander Levakov

1231 silver badge4 bronze badges

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

Comments

PPB · Accepted Answer · 2018-03-14 06:24:33Z

1

I solved my problem by using https://www.npmjs.com/package/angular4-jsoneditor. I am using it in view mode.

answered Mar 14, 2018 at 6:24

PPB

2873 gold badges7 silver badges22 bronze badges

1 Comment

marioosh Over a year ago

Another module, that can be used here.

Collectives™ on Stack Overflow

Angular: tree view from json data

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related