Topic: Angular SideNav Collapsible link does not load
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.
Issue still exists in version 8.8.0
Arkadiusz Idzikowski staff commented 5 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.
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 5 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 pro premium commented 5 years ago
The items are shown/hidden at the ngOnInit function. Read from the sessionstorage
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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