Topic: Auto Expand on Dynamic Accordion Menu doesn't work
When an item under an accordion head is clicked, that accordion should stay open when navigation if the autoExpand property of the accordion is set to true.
If I create a static accordion menu with the same nav structure the autoExpand works fine. As soon as I try to dynamically create an accordion menu by looping over "navSections" in this example, autoExpand stops working.
Any help here would be appreciated.
Here's the navSections Json:[{"sectionId":1,"sectionName":"Dashboard","route":null,"icon":"home","roles":null,"children":[{"sectionId":1,"sectionName":"Dashboard","route":"dashboard","icon":"home","roles":"1,2","children":null}]},{"sectionId":2,"sectionName":"Content","route":null,"icon":"folder-open","roles":null,"children":[{"sectionId":2,"sectionName":"Products","route":"products","icon":"folder-open","roles":"1,2","children":null},{"sectionId":2,"sectionName":"Promotion","route":"promotions","icon":"folder-open","roles":"1,2","children":null},{"sectionId":2,"sectionName":"Privacy","route":"privacy","icon":"folder-open","roles":"1,2","children":null},{"sectionId":2,"sectionName":"Terms","route":"terms","icon":"folder-open","roles":"1,2","children":null},{"sectionId":2,"sectionName":"Cookie Policy","route":"cookie-message","icon":"folder-open","roles":"1,2","children":null}]},{"sectionId":3,"sectionName":"System","route":null,"icon":"sliders-h","roles":null,"children":[{"sectionId":3,"sectionName":"Admin Accounts","route":"users","icon":"sliders-h","roles":"1","children":null},{"sectionId":3,"sectionName":"Translations","route":"translations","icon":"sliders-h","roles":"1,2","children":null},{"sectionId":3,"sectionName":"Countries","route":"countries","icon":"sliders-h","roles":"1,2","children":null}]}]
Here's the html:
<ul class="collapsible collapsible-accordion" *ngIf="showNav==true">
<mdb-accordion [autoExpand]="true" [multiple]="false" aria-multiselectable="false">
<div *ngFor="let item of navigationSections">
<mdb-accordion-item class="no-collase" routerLink="/{{item.children[0].route}}" *ngIf="item.children.length==1 && checkRole(item.children[0].roles)">
<mdb-accordion-item-head mdbWavesEffect routerLinkActive="active">
<mdb-icon fas icon="{{item.icon}}" size="5x"></mdb-icon> {{item.sectionName}}
</mdb-accordion-item-head>
<mdb-accordion-item-body></mdb-accordion-item-body>
</mdb-accordion-item>
<!-- Collapsible link -->
<mdb-accordion-item *ngIf="item.children.length>1" >
<mdb-accordion-item-head mdbWavesEffect ><mdb-icon fas icon="{{item.icon}}"></mdb-icon> {{item.sectionName}}</mdb-accordion-item-head>
<mdb-accordion-item-body>
<ul>
<li *ngFor="let link of item.children">
<a *ngIf="checkRole(link.roles)" routerLink="https://mdbcdn.b-cdn.net/{{link.route}}" mdbWavesEffect routerLinkActive="active">{{link.sectionName}}</a>
</li>
</ul>
</mdb-accordion-item-body>
</mdb-accordion-item>
</div>
</mdb-accordion>
</ul>
</li>
<!--/. Side navigation links -->
<div class="sidenav-bg mask-strong"></div>
</mdb-side-nav>
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 8.0.0
- Device: Desktop
- Browser: Chrome
- OS: Windows/Mac
- Provided sample code: No
- Provided link: No
Konrad Stępień staff commented 5 years ago
Hi @marketingtech,
Can you make me a simple project on code sandbox or GitHub?
I am trying to open a project, but I have some concerns that something may go wrong along the way, and I prefer to rule out errors caused by restoring the project from the very beginning.
Because your project has some functions and data what do you didn't include in the post.
Best, Konrad.