Topic: Sidenav: Cannot read properties of undefined (reading 'nativeElement')
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>
@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 pro premium commented 3 years ago
Thanks! This works :-)
Arkadiusz Idzikowski staff commented 3 years ago
@malte This problem was fixed in v12.2.0.
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: MDB4 11.1.0
- Device: PC
- Browser: Chrome
- OS: WIndows 11
- Provided sample code: No
- Provided link: No