Topic: Title: MDB Angular 9.1.0 - MdbSidenavLayoutComponent throws error

stokkup2313 priority asked 3 hours ago


Expected behavior The mdb-sidenav-layout component should initialize properly when wrapping mdb-sidenav component without throwing runtime errors.

Actual behavior When using MDB Angular UI Kit 9.1.0 with Angular 20.3.16, the application throws the following error at runtime:

ERROR TypeError: Cannot read properties of undefined (reading 'sidenavTransitionDuration')
at MdbSidenavLayoutComponent.ngAfterViewInit (mdb-angular-ui-kit-sidenav.mjs:44:66)
at callHookInternal (debug_node.mjs:860:14)
at callHook (debug_node.mjs:887:13)
at callHooks (debug_node.mjs:841:17)
at executeInitAndCheckHooks (debug_node.mjs:791:9)
at refreshView (debug_node.mjs:10237:21)
at detectChangesInView (debug_node.mjs:10381:9)
at detectChangesInViewIfAttached (debug_node.mjs:10341:5)
at detectChangesInComponent (debug_node.mjs:10329:5)
at detectChangesInChildComponents (debug_node.mjs:10407:9)

ERROR TypeError: Cannot read properties of undefined (reading 'mode')
at MdbSidenavLayoutComponent.toggleBackdrop (mdb-angular-ui-kit-sidenav.mjs:61:35)
at mdb-angular-ui-kit-sidenav.mjs:310:36
at _ZoneDelegate.invoke (zone.js:398:28)
at Object.onInvoke (debug_node.mjs:7923:33)
at _ZoneDelegate.invoke (zone.js:397:34)
at ZoneImpl.run (zone.js:113:43)
at zone.js:2537:40
at _ZoneDelegate.invokeTask (zone.js:431:33)
at debug_node.mjs:7585:55
at AsyncStackTaggingZoneSpec.onInvokeTask (debug_node.mjs:7585:36)

The MdbSidenavLayoutComponent is trying to access sidenavTransitionDuration property from the sidenav component, but this property is undefined, causing the application to crash.

Resources (screenshots, code snippets etc.) Environment:

MDB Angular UI Kit: 9.1.0 Angular: 20.3.16 Node.js: v23.4.0 TypeScript: 5.8.3

app.component.html:

<mdb-sidenav-layout><core-sidenav></core-sidenav><mdb-sidenav-content><!-- content --></mdb-sidenav-content></mdb-sidenav-layout>

<mdb-sidenav #sidenav="mdbSidenav" [mode]="mode" [hidden]="hidden" class="sidenav-color-primary">



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 9.1.0
  • Device: Desktop
  • Browser: Chrome
  • OS: macOS
  • Provided sample code: No
  • Provided link: No