Angular Material mat-sidenav-content not showing

Question

Angular Material Version: @angular/material@14.0.2

I am building a web application using the Angular framework for the first time. The app-routing-module lazy loads a dashboard module that declares the desired components and imports the required modules. The dashboard module imports a dashboard routing module which holds the routes with the WrapperComponent as the parent and the side nav content as the children, split up into different components.

dashboard-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { LoginComponent } from './components/login/login.component';
import { WrapperComponent } from './components/wrapper/wrapper.component';

const routes: Routes = [
{
    path: '',
    component: WrapperComponent,
    children: [
        {
            path: 'dashboard', // --> localhost:4200/dashboard
            component: DashboardComponent,
        },
        {
            path: 'login', // --> localhost:4200/login
            component: LoginComponent,
        },
        {
            path: 'about', // --> localhost:4200/about
            component: AboutComponent,
        }
    ]
},
{
    path: '**',
    redirectTo: '/dashboard',
    pathMatch: 'full'
}
];

@NgModule({
     imports: [RouterModule.forChild(routes)],
     exports: [RouterModule]
})
export class DashboardRoutingModule { }

wrapper.component.html

<mat-sidenav-container>
<mat-sidenav #sideNav mode="side" opened="opened">
    <app-side-nav>
    </app-side-nav>
</mat-sidenav>
<mat-sidenav-content>
    <router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>

The app-side-nav component consists of the router links.

<div class="sidenav">
<div class="logo">
    <a (click)="toggleMenuState()" class="simple-text logo-mini">
        <div class="logo-img">
            <img src="./assets/images/sample_logo.png" alt="logo">
        </div>
    </a>
</div>

<ul class="nav">
    <li class="active nav-list-item"><a routerLink="/default-route"><i class="fa fa-dashboard fa-nav-icon"><span class="nav-item-text">Dashboard</span></i></a></li>
    <li class="nav-list-item"><a routerLink="/some-route"><i class="fa fa-group fa-nav-icon"><span class="nav-item-text">Groups</span></i></a></li>
    <li class="nav-list-item"><a routerLink="/some-route"><i class="fa fa-line-chart fa-nav-icon"><span class="nav-item-text">Charts</span></i></a></li>
    <li class="nav-list-item"><a routerLink="/some-route"><i class="fa fa-book fa-nav-icon"><span class="nav-item-text">Portfolio</span></i></a></li>
    <li class="nav-list-item"><a routerLink="/login"><i class="fa fa-user fa-nav-icon"><span class="nav-item-text">Login</span></i></a></li>
    <li class="nav-list-item"><a routerLink="/some-route"><i class="fa fa-gear fa-nav-icon"><span class="nav-item-text">Settings</span></i></a></li>
</ul>

This seems to work fine because I can see the relevant content being loaded in the DOM depending on the button clicked. But for some reason, the content is not visible. Here is a screenshot of the dashboard component loaded. For some reason, it is loading with a margin of 1920px but even when removed the content is still not visible.

The structure seems to work yet there is something not quite right otherwise the content would show. Would appreciate any thoughts, suggestions or further questions.

Answer 1

I think your proble is material think that your app-side-nav or mat-sidenav have a full screen width, on the screenshot as I can see, content have a 1920px margin-left, this means that your view out of the bound of screen. There is my example with correct margin, pay attention to your nav component: Stackblitz example Hope this helps.

Answer 2

After checking the rendered template it seems that your code lacks the routing precision.

Your app-routing.module.ts says that for path "" it should use DashboardModule. In the module you say that for path "" it should render a WrapperComponent. And after this point it has no default route.

So, basically what happens is that your wrapper component is rendered, however none of its children matches the route. To fix it, you have two options:

• provide handler for "" route in the wrappers children routes
• add a redirect to one of the routes using a wildcard route as I did in the Stackblitz fork of your GitHub project.

Stackblitz fork

That is to fix that router outlet does not render anything.

Another problem is <mat-sidenav #sideNav mode="side" opened="opened">, as you are assigning a string to the boolean flag, which means that it will be always truthy and won't display what's underneath.

In result removing opened="opened" and adding a redirection to the dashboard page we can see the "dashboard works!"

P.S. Looking at the examples in the docs it doesn't look to be designed to work the way you want it to. Rather show or hide behavior. Not expand.

P.S.S. You could try using autoresize and toggle width manually for the ever open sidenav as suggested here