Topic: Sidenav visually works, but console throws several TypeErrors and does not appear to set mode

Bakke premium asked 10 months ago


I am running into an issue where it appears the sidenav is undefined at some point on page reload or window resizing, yet functionally it seems to behave properly. I mimicked the MDB Navigation example for use in my project.

Context for my application I have two separate navs depending on whether the user is logged in or not. I have a plain navbar for the public facing page, and a double nav (sidenav + navbar) for logged in users. I switch between these two with a "logged-in" check using an ngIf in the html. Shown here: ngIf for toggling between navs

Because of this functionality, I cannot use the "!" or "static: true" when defining the viewchild in the ts. I believe this is where at least part of this issue stems from.

Here is the sidenav tag in the html:

<ng-template #loggedIn>
<mdb-sidenav-layout>
  <mdb-sidenav
    #tagsSidenav="mdbSidenav"
    id="tags-sidenav"
    [mode]="mode"
    [hidden]="hidden"
    [accordion]="true"
  >
    <a
      class="d-flex justify-content-center py-4"
      routerLink="/home"
      mdbRipple
      rippleColor="primary"
    > etc...

And here are the mode and hidden boolean declarations in the .ts file, as well as the runOutsideAngular function (within ngAfterViewInit as in the documentation):

public mode = window.innerWidth >= 1400 ? 'side' : 'over';
public hidden = window.innerWidth >= 1400 ? false : true;
...
this.ngZone.runOutsideAngular(() => {
  fromEvent(window, 'resize').subscribe(() => {
    if (window.innerWidth < 1400 && this.mode !== 'over') {
      this.ngZone.run(() => {
        this.mode = 'over';
        if (this.isLoggedIn) {
          this.loggedInPadding = false;
        }
        if (this.sidenavComp !== undefined) {
          this.hideSidenav();
        }
      });
    } else if (window.innerWidth >= 1400 && this.mode !== 'side') {
      this.ngZone.run(() => {
        this.mode = 'side';
        if (this.isLoggedIn) {
          this.loggedInPadding = true;
        }
        if (this.sidenavComp !== undefined) {
          this.showSidenav();
        }
      });
    }
  });
});

And while I believe I have everything setup correctly, whenever I reload a page, or resize it over the sidenav breakpoint, it throws several different TypeError: Cannot read properties of undefined for mode, transitionDuration, and sidenavTransitionDuration. In the error, it appears they stem from the MdbSidenavLayoutComponent.toggleBackdrop function.

Is there something wrong in how I setup the sidenav? Would a better option instead be to have one nav setup in the header, and on the public facing page, keep the sidebar hidden and change the content of the navbar, rather than having two separate navs? Again, functionally, it seems to work fine. The sidenav does hide and show as expected, but I'm not sure if it is actually changing the mode correctly as on smaller screens, after I click the toggle button to reveal the sidebar, the screen does not darken, and I cannot re-hide the sidebar unless I navigate to a new page using one of the links in the sidebar.

Resources (screenshots, code snippets etc.)


Rafał Seifert free commented 10 months ago

We could not recreate the error you are encountering. The example from our demo works fine. The problem seems to be connected with the *ngIf and ng-template use case. Could you edit and provide a full code implemntation of your example? How and when do you change the isLoggedIn property? If you have navbar shown all the time and sidenav only for logged users it might be a good call to render navbar always and sidenav conditionally.


Bakke premium commented 9 months ago

I'm sorry for forgetting to follow up on this, but I ran into this issue on version 5.1.0 of MDB 5. I updated to version 5.2.0 and these errors magically disappeared and the sidenav now actually changes modes and behaves as expected. I'm not sure what changed, as I did not change any code and ensured it matched what was in the docs, but now it works.


Bakke premium answered 9 months ago


I'm sorry for forgetting to follow up on this, but I ran into this issue on version 5.1.0 of MDB 5. I updated to version 5.2.0 and these errors magically disappeared and the sidenav now actually changes modes and behaves as expected. I'm not sure what changed, as I did not change any code and ensured it matched what was in the docs, but now it works.



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: MDB5 5.1.0
  • Device: N/A
  • Browser: N/A
  • OS: N/A
  • Provided sample code: No
  • Provided link: No