Topic: Sidenav category won't expand
Expected behavior
"Category 1" expand to show the links.
Actual behavior
Nothing happens when clicking "Category 1". No compiler errors or messages in browser console.
If I set the ul class to "sidenav-collapse show" then Link 1 and 2 appear, but will not collapse when clicking the Category.
The same issue happens when using the basic example from the documentation, without any changes.
Resources (screenshots, code snippets etc.)
Here is the relevant code from mdb-sidenav:
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin fa-fw me-3 pe-1"></i><span slim="false">Category 1</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item"><a href="/page1" class="sidenav-link">Link 1</a></li>
<li class="sidenav-item"><a href="/page2" class="sidenav-link">Link 2</a></li>
</ul>
</mdb-sidenav-item>
Hello, have you properly imported Collapse module? It's neccessary to import it in your app.module.ts in order to work
import { MdbCollapseModule } from 'mdb-angular-ui-kit/collapse';
…
@NgModule ({
...
imports: [MdbCollapseModule],
...
})
https://mdbootstrap.com/docs/b5/angular/components/collapse/#api-section-import
Also, please remove the show class from the .sidenav-collapse element and add [collapsed]="false" binding instead.
jasonh pro premium priority commented 2 years ago
Thanks, this fixed it! I didn't see the docs mention anything about requiring that module - but I think the clue is that "mdbCollapse" is in the .
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 2.2.0
- Device: PC
- Browser: Edge 103
- OS: Windows 11
- Provided sample code: No
- Provided link: No