Display data as Tree angular

Question

I am trying to display the people data as a tree with a filter following "select fields: area", does angular give a possibility to display the data in this form? and how can I do it? I have data in this structure

public rowData = [
{
  area : area A',
  Persons: [
    { person:  'person 1', position :'lvl 1' , sup: '' } ,
    { person:  'person 2', position :'lvl 2' , sup :'person 1' }, 
    { person:  'person 3', position :'lvl 2' , sup :'person 1'  } ,
    { person:  'person 4', position :'lvl 3' , sup :'person 3'} ,
    { person:  'person 5', position :'lvl 3' , sup :'person 4'} ,
    { person:  'person 6', position :'lvl 3' , sup :'person 5'} ,
    { person:  'person 7', position :'lvl 4' , sup :'person 6'} 
  
},
{
  area : area B',
  Persons: [
    { person:  'person 21', position :'lvl 1' , sup :''} ,
    { person:  'person 22', position :'lvl 2' , sup :'person 1'}, 
    { person:  'person 23', position :'lvl 2' , sup :'person 1'} ,
    { person:  'person 24', position :'lvl 3' , sup :'person 2'} ,
    { person:  'person 25', position :'lvl 3' , sup :'person 2'} ,
   
  
},
  ]

Answer 1

I'm working on create a TreeView Graphic in pure Angular. To not "re-invent the wheel" I copied the code from this old CodeProject article

I put the code in this stackblitz

It's hard (and too large) explain all the code, futhermore I need to do some cleanup because there are functions that are not implemented

Usage

Basically you need to copy the tree-view.component.ts and the econode.ts . Works simply using

    <tree-view #treeView [data]="data" [template]="treeTemplate"> 
    </tree-view>
    <ng-template #treeTemplate let-node>
      {{node.data.id}}
    </ng-template>

Where data is a typical object with children. The nodes are of type IECONode in the way

    export interface IECONode
    {
      data:any;
      linkColor?:string;
      background?:string;
      color?:string;
      width?:number;
      height?:number;
      children?:IECONode[];
    }

And the properties are inherited from the parent elements

• NOTE: As I update the code, I'll update this post *

Update 1

I improved the component adding three functions:

1. getChildren
2. getParent
3. getSlibingNodes

Futhermore, I got out the div element. the template is more complex but allows usage of (click) or (mouseover) to select one node or its parent/children.

Only the "nodes" are "colored" if they are selected, and only the "lines" are "colored" if go to a node selected.

This allow, eg select the nodes in a mouse over (or in a click)

    <ng-template #treeTemplate let-node>
      <div class="item" (mouseover)="selectSlibingNodes(treeView,node)" 
            [ngStyle]="node.isSelected?{'background-color':node.bc,color:node.c}:null">
      {{node.data.id}}
      </div>
    </ng-template>

The function selectSlibingNodes like:

      selectSlibingNodes(treeView: TreeViewComponent, node: ECONode) {
        if (node==this.nodeSelected) {
          this.nodeSelected=null;
          treeView.nodes.forEach(x => {
            x.isSelected = false;
          });
        } else {
          this.nodeSelected=node;
          const nodes = treeView.getSlibingNodes(node).map(x => x.id);
          treeView.nodes.forEach(x => {
            x.isSelected = x.id == node.id || nodes.indexOf(x.id) >= 0;
          });
        }
      }

I made a new stackblitz with the changes

Answer 2

you can use angular2-tree-diagram package

angular2-tree-diagram