CODEWITHSUNDEEP
angularangular5
PPB
PPB

Reputation: 287

Angular: tree view from json data

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.

Upvotes: 3

Views: 18223

Answers (2)

Alexander Levakov
Alexander Levakov

Reputation: 123

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

Upvotes: 6

PPB
PPB

Reputation: 287

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

Upvotes: 1

Related Questions