I am trying to make my sidenav in my angular application working but I have some problems with it that I can not solve

Question

I have generated new component for my mat side nav but when I try to route something to sidebar content using routeroutlet the component that I am trying to route to covers the sidenav and is on full page.

I dont know if its something wrong with the component that I have my side nav in or something else.

Answer 1

Try this

<app-header *ngIf="connected"></app-header>
    <mat-sidenav-container>
      <mat-sidenav style="width: 15%" [opened]="open" [mode]="'side'">
        <mat-nav-list>
          <app-list-navigation></app-list-navigation>
        </mat-nav-list>
      </mat-sidenav>
      <mat-sidenav-content>
        <div style="height: 90vh">
          <router-outlet></router-outlet>
        </div>
      </mat-sidenav-content>
    </mat-sidenav-container>
    <app-footer *ngIf="connected"></app-footer>

Make sur that the component is in the main module or in sub module of main module