Topic: Sidenav category won't expand

jasonh priority asked 2 years ago


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>

Michał Duszak staff answered 2 years ago


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 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 .



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Priority
  • 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