After apply ngIf condition inside the side menu nested loop, collapse/Expand CSS function not working in angular 6

Question

this is my side bar dynamic nested loop binding code

 <ul class="nav metismenu" id="side-menu" *ngIf="concatMenulist?.length > 0">

                <li  *ngFor="let menu1 of concatMenulist"> <!--level 01-->

                      <a *ngIf="menu1?.SubMenu && menu1.SubMenu?.length > 0" href="#"> <span class="fa fa-book"></span> <span class="nav-label">{{menu1.DisplayText}}</span> <span class="fa arrow"></span> </a>
                      <a *ngIf="!menu1?.SubMenu || menu1.SubMenu?.length === 0" href="{{menu1.ActionUrl}}"><span class="fa fa-user"></span>  <span class="nav-label">{{menu1.DisplayText}}</span></a>

                    <ul  *ngIf="menu1?.SubMenu && menu1.SubMenu?.length > 0"  class="nav nav-second-level collapse" >

                         <li  *ngFor="let menu2 of menu1.SubMenu" > <!--level 02-->

                               <a *ngIf="menu2?.SubMenu && menu2.SubMenu?.length > 0" href="#"><span class="fa fa-book"> </span><span class="nav-label">{{menu2.DisplayText}}</span> <span class="fa arrow"></span> </a>
                               <a *ngIf="!menu2?.SubMenu || menu2.SubMenu?.length === 0" href="{{menu2.ActionUrl}}"><span class="fa fa-book"></span> <span class="nav-label">{{menu2.DisplayText}}</span></a>


                                  <ul *ngIf="menu2?.SubMenu &&menu2.SubMenu?.length > 0"  class="nav nav-third-level collapse" >

                                       <li *ngFor="let menu3 of menu2.SubMenu"> <!--level 03-->
                                           <a *ngIf="menu3?.SubMenu && menu3.SubMenu?.length > 0" href="#"> <span class="fa fa-book"></span><span class="nav-label">{{menu3.DisplayText}}</span><span class="fa arrow"></span></a>
                                           <a *ngIf="!menu3?.SubMenu || menu3.SubMenu?.length === 0" href="{{menu3.ActionUrl}}"> <span class="fa fa-pencil"></span><span class="nav-label">{{menu3.DisplayText}}</span></a>
                                      </li>

                                  </ul>
                         </li>

                    </ul>
                </li>

        </ul>

before add ngIf condition, css Expand/Collapse worked properly. but after input that, not working. please someone help me...

Answer 1

<ul class="nav metismenu" id="side-menu" [hidden]="concatMenulist?.length > 0">

                <li  *ngFor="let menu1 of concatMenulist"> <!--level 01-->

                      <a [hidden]="menu1?.SubMenu && menu1.SubMenu?.length > 0" href="#"> <span class="fa {{menu1.CssClass}}"></span> <span class="nav-label">{{menu1.DisplayText}}</span> <span class="fa arrow"></span> </a>
                      <a [hidden]="!menu1?.SubMenu || menu1.SubMenu?.length === 0" href="{{url}}{{menu1.ActionUrl}}"><span class="fa {{menu1.CssClass}}"></span>  <span class="nav-label">{{menu1.DisplayText}}</span></a>

                    <ul  [hidden]="menu1?.SubMenu && menu1.SubMenu?.length > 0"  class="nav nav-second-level collapse" >

                         <li  *ngFor="let menu2 of menu1.SubMenu" > <!--level 02-->

                               <a [hidden]="menu2?.SubMenu && menu2.SubMenu?.length > 0" href="#"><span class="fa {{menu2.CssClass}}"> </span><span class="nav-label">{{menu2.DisplayText}}</span> <span class="fa arrow"></span> </a>
                               <a [hidden]="!menu2?.SubMenu || menu2.SubMenu?.length === 0" href="{{url}}{{menu2.ActionUrl}}"><span class="fa {{menu2.CssClass}}"></span> <span class="nav-label">{{menu2.DisplayText}}</span></a>


                                  <ul [hidden]="menu2?.SubMenu &&menu2.SubMenu?.length > 0"  class="nav nav-third-level collapse" >

                                       <li *ngFor="let menu3 of menu2.SubMenu"> <!--level 03-->
                                           <a [hidden]="menu3?.SubMenu && menu3.SubMenu?.length > 0" href="#"> <span class="fa {{menu3.CssClass}}"></span><span class="nav-label">{{menu3.DisplayText}}</span><span class="fa arrow"></span></a>
                                           <a [hidden]="!menu3?.SubMenu || menu3.SubMenu?.length === 0" href="{{url}}{{menu3.ActionUrl}}"> <span class="fa {{menu3.CssClass}}"></span><span class="nav-label">{{menu3.DisplayText}}</span></a>
                                      </li>

                                  </ul>
                         </li>

                    </ul>
                </li>

        </ul>

I have the same problem in my project. You can use [hidden]="condition here", hope it will work fine.