Is it possible to left side menu collapse have page + Angular 2.0?

Question

First of all please check follow snapshot.

In above picture CRF is parent and it's multiple child possibility e.g. folders . now folders also have sub-childs. Now actually I want when I click on folders than It's child will also be expands and also right side need one page that has basic form. So two action need to implements So, Any one have seen demo like this than please send me link and suggest me how should it possible with Angular2.0

Answer 1

You can use that one: tree view component

Or you can implement one for yourself. Basically, onclick you should change its childrens display property.

<button (click)="item.expand(item)">
    <md-icon>{{item.icon}}</md-icon>
    {{item.text}}
</button>
<div *ngFor="let child of item.children">
   <button [ngClass]="{'hidden' : !child.visible}">{{child.text}}
   </button>
 </div>

on expand function toggle item.children's visible property and change items icon.

item = {
 text: "Folders"
 icon: "keyboard_arrow_button"
 children: [{text: Subfolders, visible: false}]
}

.hidden{
  display: none;
}