Angular material application with login and basic sidenav

Question

I have an application with a login component a dashboard component which contains an angular material basic mat-sidenav-container and two more components. In the mat-sidenav I have set two routerLink items for the two components. How should I configure the app-routing in order to render the components in the mat-sidenav-content? My app-routing looks like this:

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthguardService],
    children: [
      { path: 'first', component: FirstComponent},
      { path: 'second', component: SecondComponent}
    ]
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    component: LoginComponent
  },
  {
    path: '**',
    component: PageNotFoundComponent
  }
];

And this is my dashboard component:

<mat-sidenav-container class="example-container">
  <mat-sidenav mode="side" opened>
    <mat-nav-list>
      <a mat-list-item routerLink='/first'>First Component</a>
      <a mat-list-item routerLink='/second'>Second Component</a>
      <a mat-list-item (click)="onLogOut()">Log out</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

I just removed the slash '/' from the routerLink in the dashboard component template and it worked — Elias

Elias Elias · Accepted Answer · 2019-01-01T14:44:28

I just removed the slash '/' from the routerLink in the dashboard component template and it worked:

<a mat-list-item routerLink='first'>First Component</a>
<a mat-list-item routerLink='second'>Second Component</a>

Angular material application with login and basic sidenav

1 Answers