typescript - Angular2 sidenav with collapsible list: keeping only one sublist open -

i have working sidenav demo here using angular 2, typescript, , material design components. on sidenav there ul, , sites , users anchors in ul expand show own sub-list.

plunker here

here's html of sidenav:

<md-sidenav #start mode="over" class="sidedrawer">     <ul class="sidenav">       <li><a>dashboard</a></li>       <li>         <a (click)="sidenavclick()">sites</a>           <div>             <ul *ngif="clickedsites" class="sublist">                 <li><a (click)='sidenavalert()'>all sites</a></li>                 <li><a>site groups</a></li>             </ul>           </div>       </li>       <li>         <a (click)="sidenavclickuser()">users</a>           <div>             <ul *ngif="clickedusers" class="sublist">                 <li><a (click)="sidenavalert()" >add user</a></li>                 <li><a>edit user</a></li>                 <li><a>remove user</a></li>             </ul>           </div>       </li>       <li>           <a>lights</a>       </li>       <li><a>settings</a></li>     </ul> </md-sidenav> 

this simple implementation of solution, real sidenav have many more navigation options in sidenav, , have children need either shown or hidden. however, want 1 sublist showing @ time. don't want have boolean every sublist , use *ngif show , hide them, , have master function in component flips boolean values. i'm hoping more lean, don't know what's possible angular 2 this. know maybe css solution, think force me add , remove classes each individual list, flipping boolean value each individual list in other potential solution.

any ideas/tips?

one solution store (single) open menu in variable. whenever expandable menu item clicked, either menu closes (if open), or opens, while open 1 closes.

the component:

export class appcomponent {     clicked: string = null;      sidenavclick(clicked: string): void {         this.clicked = this.clicked == clicked ? null : clicked;     }      sidenavalert(): void {         alert("sublist item clicked");     } } 

and template file:

<a (click)="sidenavclick('sites')">sites</a> <div>     <ul *ngif="clicked == 'sites'" class="sublist">...</ul> </div>  ...  <a (click)="sidenavclick('users')">users</a> <div>     <ul *ngif="clicked == 'users'" class="sublist">...</ul> </div> 

as side note; recommend creating array in component, based on menu automatically generated avoid having type possibilities.

here modified plunker.