Angular SideNav Collapsible link does not load


Topic: Angular SideNav Collapsible link does not load

infortel pro premium asked a year 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>

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.


infortel pro premium answered a year ago

Issue still exists in version 8.8.0


Arkadiusz Idzikowski staff commented a year 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.


infortel pro premium answered a year 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 a year 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 pro premium commented a year ago

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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 8.1.0
  • Device: HP Probook
  • Browser: Google Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes