Topic: Angular SideNav Collapsible link does not load

infortel premium asked 4 years ago


Expected behavior

On initial load the mdb-accordion-item-body should be visible when the route is '/authentication/users' or '/authentication/users'.

Actual behavior

It is not visible (aka display: hidden in css) but it is also not collapsed. So you have to click it twice.

Resources (screenshots, code snippets etc.)

I am asking this question regarding this issue: https://mdbootstrap.com/support/angular/side-nav-item-not-active-on-initial-load/ .

<ul class="collapsible collapsible-accordion">
   <mdb-accordion [multiple]="false" aria-multiselectable="false">
      <ng-container *ngIf="adalService.userInfo.authenticated">
         <!-- Collapsible link -->
         <mdb-accordion-item *ngIf="claimService.hasAuthorizationClaims">
            <mdb-accordion-item-head mdbWavesEffect>
               <mdb-icon class="icon green-text" fas icon="shield-alt"></mdb-icon>
               <span class="title">Authentication</span>
            </mdb-accordion-item-head>
            <mdb-accordion-item-body>
               <ul>
                  <li *ngIf="claimService.hasAuthorizationUserClaims">
                     <a href="#" routerLink="/authentication/users" routerLinkActive="active"
                        mdbWavesEffect>
                        <mdb-icon class="icon" fas icon="user"></mdb-icon>
                        <span class="title">Users</span>
                     </a>
                  </li>
                  <li *ngIf="claimService.hasAuthorizationGroupClaims">
                     <a href="#" routerLink="/authentication/groups" routerLinkActive="active"
                        mdbWavesEffect>
                        <mdb-icon class="icon" fas icon="users"></mdb-icon>
                        <span class="title">Groups</span>
                     </a>
                  </li>
               </ul>
            </mdb-accordion-item-body>
         </mdb-accordion-item>
      </ng-container>
   </mdb-accordion>
</ul>

infortel premium answered 4 years ago


After removing all ngIf statements it works. What do you suggest to make this work with the ngIf statements?

This is how it works now:

  <links>
     <li class="side-links">
        <ul class="collapsible collapsible-accordion">
           <mdb-accordion [multiple]="false" aria-multiselectable="false">
              <!-- *ngIf="adalService.userInfo.authenticated" -->
              <ng-container>
                 <!-- *ngIf="claimService.hasPdfPrinterClaims" -->
                 <mdb-accordion-item class="no-collase">
                    <mdb-accordion-item-head mdbWavesEffect routerLinkActive="active" routerLink="/pdf-printers">
                       <mdb-icon class="icon indigo-text" fas icon="print"></mdb-icon>
                       <span class="title">PDF Printers</span>
                    </mdb-accordion-item-head>
                 </mdb-accordion-item>

                 <!-- *ngIf="claimService.hasTemplateBuilderClaims" -->
                 <mdb-accordion-item class="no-collase">
                    <mdb-accordion-item-head mdbWavesEffect routerLinkActive="active" routerLink="/pdf-templates">
                       <mdb-icon class="icon red-text" fas icon="file-pdf"></mdb-icon>
                       <span class="title">PDF Templates</span>
                    </mdb-accordion-item-head>
                 </mdb-accordion-item>

                 <!-- Collapsible link -->
                 <!-- *ngIf="claimService.hasAuthenticationClaims" -->
                 <mdb-accordion-item>
                    <mdb-accordion-item-head mdbWavesEffect routerLinkActive="active">
                       <mdb-icon class="icon green-text" fas icon="shield-alt"></mdb-icon>
                       <span class="title">Authentication</span>
                    </mdb-accordion-item-head>
                    <mdb-accordion-item-body>
                       <ul>
                          <!-- *ngIf="claimService.hasAuthenticationUserClaims" -->
                          <li>
                             <a href="#" routerLink="/authentication/users" routerLinkActive="active"
                                mdbWavesEffect>
                                <mdb-icon class="icon" fas icon="user"></mdb-icon>
                                <span class="title">Users</span>
                             </a>
                          </li>
                          <!-- *ngIf="claimService.hasAuthenticationGroupClaims" -->
                          <li>
                             <a href="#" routerLink="/authentication/groups" routerLinkActive="active"
                                mdbWavesEffect>
                                <mdb-icon class="icon" fas icon="users"></mdb-icon>
                                <span class="title">Groups</span>
                             </a>
                          </li>
                       </ul>
                    </mdb-accordion-item-body>
                 </mdb-accordion-item>
              </ng-container>
           </mdb-accordion>
        </ul>
     </li>
  </links>

Arkadiusz Idzikowski staff commented 4 years ago

We will take a closer look at that and try to find the cause of this problem. It would be very helpful if you can describe the js logic behind the ngIf directives in this case. When exactly are those elements shown/hidden?


infortel premium commented 4 years ago

The items are shown/hidden at the ngOnInit function. Read from the sessionstorage


infortel premium answered 4 years ago


Issue still exists in version 8.8.0


Arkadiusz Idzikowski staff commented 4 years ago

Could you share some html/ts code or send a simple demo app on which we will be able to reproduce that? You can send it to a.idzikowski@mdbootstrap.com.

It looks like your accordion items are hidden/shown dynamically with *ngIf directive. Maybe this is the cause of the problem. We would need to know how to reproduce this exact behavior to debug that on our end.


Arkadiusz Idzikowski staff answered 4 years ago


We added some improvements for the accordion in sidenav in the latest updates. If you use v8.1.0 already, please upgrade your version to 8.8.0, it should help to resolve this problem.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 8.1.0
  • Device: HP Probook
  • Browser: Google Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes