How to display tree structure angular2

Question

I have object somethig like this:

{
 id: 1,
 text: "Main",
 childText: [
   {
    id: 3,
    text: "Child 1",
    childText: [
      {
        id: 5,
        text: "child 2"
        childText: [
        ....
        ]
      }
    ]
   }
 ]    
}

Any object can have childText any idea how to display this?

stackoverflow.com/questions/38821475/…, stackoverflow.com/questions/37746516/use-component-in-itself/…, stackoverflow.com/questions/35707464/… — Günter Zöchbauer
– Günter Zöchbauer, Commented Dec 4, 2016 at 14:15

soroush gholamzadeh · Accepted Answer · 2016-12-04 15:19:08Z

5

You should use a self-referencing component to do that:

@Component({
  selector: 'app-tree-view',
  templateUrl: './tree-view.component.html',
  styleUrls: ['./tree-view.component.css']
})
export class TreeViewComponent implements OnInit {
    @Input() data: {children: Array<any>,name: string,id: number};
    showChildren: boolean;
}

In tree-view.component.html:

<ul class="office-list-unstyled" *ngIf="data">
  <li [ngClass]="{'office-parent': d.children.length && !showChildren,'office-child': d.children.length && showChildren}"
  *ngFor="let d of data.children">
    <span (click)="toggleOffices(d)">{{d.name}}</span>
    <app-tree-view *ngIf="d.children.length && showChildren" [data]="d"></app-tree-view>
  </li>
</ul>

Note that, *ngIf in the view is the thing to stop the loop. And then you can use it in another component:

<app-tree-view [data]="offices"></app-tree-view>

Offices is your initial data for example.

edited Dec 4, 2016 at 15:19

answered Dec 3, 2016 at 18:23

soroush gholamzadeh

2,7941 gold badge25 silver badges30 bronze badges

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

3 Comments

Vladimir Djukic Over a year ago

What is inside tree-view.component.html ?

soroush gholamzadeh Over a year ago

@VladimirDjukic Look at In the Html part of my answer.

Vladimir Djukic Over a year ago

How then I call that component from other component?

Collectives™ on Stack Overflow

How to display tree structure angular2

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related