javascript - Angular 4 Multilevel Accordion Issue -

i'm trying make accordion when click level, progressively shows each new level if there one, right it's recursively displaying levels of accordion. know there packages you, want create own better understanding of angular4. how accordion displaying now, want able click each level.

• menu 1

• menu 2

  • sub menu 2
    • sub sub menu 2
      • sub sub sub menu 2

• menu 3

i'm assuming need keep track of levels loop's index or similar, i'm not quite sure how.

list.ts

export class list {   title: string;   children: any; } 

app.component.ts

import { component } '@angular/core'; import { list } './list';  const list: list[] = [     {         title: 'menu 1',         children: []     },     {         title: 'menu 2',         children: [{             title: 'sub menu 2',             children: [{                 title: 'sub sub menu 2',                 children: [{                     title: 'sub sub menu 2, sibling 1',                     children: []                 },                 {                     title: 'sub sub sub menu 2, sibling 2',                     children: []                 }]             }]         }]      },     {         title: 'menu 3',         children: []     } ];  @component({     selector: 'my-app',     template: `     <h1>{{title}}</h1>     <ul>         <ng-template #recursivelist let-list>             <li *ngfor="let item of list; let index = index"             [class.selected]="item === selectedlist"             (click)="onselect(item)">                 <span> {{item.title}} </span>                  <ul *ngif="item.children.length > 0">                     <ng-container *ngtemplateoutlet="recursivelist; context:{ $implicit: item.children }"></ng-container>                 </ul>             </li>         </ng-template>         <ng-container *ngtemplateoutlet="recursivelist; context:{ $implicit: list }"></ng-container>     </ul>     ` }) export class appcomponent  {     title = 'nested accordion';     list = list;     selectedlist: list;     onselect(list: list): void {         this.selectedlist = list;     } } 

you add "hide" property on list object, determine if list's children visible or not, , toggle between true/false values, when list item clicked.

here demo plunker based on code :

https://plnkr.co/edit/cigaa5bmiku4hcmsoaib?p=preview

export class list {   title: string;   children: any;   hide :boolean }  //our root app component import {component, ngmodule, version} '@angular/core' import {browsermodule} '@angular/platform-browser' import { list } './list';  const list: list[] = [     {         title: 'menu 1',         hide : true,         children: [],     },     {         title: 'menu 2',         hide : true,         children: [{             title: 'sub menu 2',             hide : true,             children: [{                 title: 'sub sub menu 2',                 hide : true,                 children: [{                     title: 'sub sub menu 2, sibling 1',                     hide : true,                     children: []                 },                 {                     title: 'sub sub sub menu 2, sibling 2',                     hide : true,                     children: []                 }]             }]         }]      },     {         title: 'menu 3',         hide : true,         children: []     } ];  @component({   selector: 'my-app',   template: `     <h1>{{title}}</h1>     <ul>         <ng-template #recursivelist let-list>             <li *ngfor="let item of list; let index = index">                 <span (click)="onselect(item)"> {{item.title}} </span>                  <ul *ngif="item.children.length > 0 && !item.hide">                      <ng-container *ngtemplateoutlet="recursivelist; context:{ $implicit: item.children }"></ng-container>                  </ul>             </li>         </ng-template>         <ng-container *ngtemplateoutlet="recursivelist; context:{ $implicit: list }"></ng-container>     </ul>   `, }) export class app {   name:string;   constructor() {     this.name = `angular! v${version.full}`   }    title = 'nested accordion';   list = list;   selectedlist: list;   onselect(list: list): void {     list.hide = !list.hide;     this.selectedlist = list; }