Topic: Sidenav: Cannot read properties of undefined (reading 'nativeElement')

malte premium asked 2 years ago


Expected behavior Sidenav loads without error

Actual behavior After updating mdb from 10.x to 11.x this error accurs. Angular got updated also to 11.x via ng update.

Resources (screenshots, code snippets etc.)

Cannot read properties of undefined (reading 'nativeElement')

 set side(position) {
    if (position === 'left') {
        this._sidenavTransform = 'translateX(-100%)';
        this.renderer.removeClass(this.sideNav.nativeElement, 'side-nav-right');
    }
    else {
        this._sidenavTransform = 'translateX(100%)';
        this.renderer.addClass(this.sideNav.nativeElement, 'side-nav-right'); //points to this line here
    }
    this._side = position;
}

My Implementation:

  <mdb-side-nav #sidenav class="fixed d-md-none my-navigation-sidebar" [fixed]="true" side="right">
        <!-- Logo -->
        <li>
            <div class="logo-wrapper waves-light">
                <a href="#"><img src="/assets/logo.png" class="img-fluid flex-center m-auto" style="max-height: 100%" /></a>
            </div>
        </li>
</mdb-side-nav>

Arkadiusz Idzikowski staff answered 2 years ago


@malte I can confirm there is a bug. We need to make some additional tests to find the cause of it.

For now, please try to use this syntax, it looks like the component is rendered properly with these settings:

<mdb-side-nav #sidenav class="fixed d-md-none my-navigation-sidebar" [fixed]="true" [side]="'right'">

Edit: This bug was fixed in v12.2.0 and the workaround will not be necessary if you use when you upgrade your MDB Angular version.


malte premium commented 2 years ago

Thanks! This works :-)


Arkadiusz Idzikowski staff commented 2 years ago

@malte This problem was fixed in v12.2.0.



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: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB4 11.1.0
  • Device: PC
  • Browser: Chrome
  • OS: WIndows 11
  • Provided sample code: No
  • Provided link: No