Angular mat-list-item routerLink not working

Issue

I am not getting why the routing doesn't work. Any help please...

1. When I click on "Terminal 1/2/3" (please check the below picture) it doesn't show the Terminal page

2. When 'AF' is collapse, there is a big gap between AF and Dashboard in menu

Code: github.com/sid-ca/Configurator

https://stackblitz.com/edit/github-1b3qtp-vhyry6

Stackblitz: https://stackblitz.com/github/sid-ca/Configurator

app.module.ts

import { AppRoutingModule } from './app-routing.module';
imports: [
    BrowserModule,
    MatModule,
    AppRoutingModule,

index.html

<base href="/">
<app-root></app-root>

app.component.html

<app-header></app-header>
    
<mat-sidenav-container>
    <mat-sidenav mode="side" opened="true" style="min-width:60px; background: #F3F3F3;" autosize fixedTopGap="56">
        <app-sidebar></app-sidebar>
    </mat-sidenav>
    
    <mat-sidenav-content [@onSideNavChange]="sidebarState">
        <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { TerminalComponent } from './af/terminal/terminal.component';
    
const routes: Routes = [
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'terminal', component: TerminalComponent }
];
    
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

sidebar.component.html

<div class="sidebar_menu" [@onSideNavChange]="sidebarState">
    <mat-nav-list class="menu-list">
        <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent" routerLinkActive="active-list-item"
            routerLink="login" title="af">
            <mat-icon class="icon menu-icon" style="font-size: 1em !important;" [@iconAnimation]="sidebarState">input
            </mat-icon>
            <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenu}" *ngIf="isExpanded || isShowing">
                expand_more</mat-icon>
            <span class="label" [@labelAnimation]="sidebarState">AF</span>
        </mat-list-item>
        <div class="submenu" [ngClass]="{'expanded' : showSubmenu}" *ngIf="isShowing || isExpanded">
            <a mat-list-item [routerLink]="'terminal'">Terminal 1</a>
            <a mat-list-item routerLink="terminal" routerLinkActive="active">Terminal 2</a>
            <a routerLink="terminal">
                <mat-list-item> Terminal 3 </mat-list-item>
            </a>

terminal.component.html

<div class="main_container" style=" height:100vh;">
    <p>terminal works!</p>
</div>

Solution

There are multiple issues with your code which is why it is not working as expected.

When I click on "Terminal 1/2/3" (please check the below picture) it doesn't show the Terminal page

well it doesn't work becuase

1. You have wrong links. Router link should say /terminal as configured in your routing module.

<a mat-list-item routerLink="/terminal">Terminal 1</a>
<a mat-list-item routerLink="/terminal" routerLinkActive="active">Terminal 2</a>
<a routerLink="/terminal"> <mat-list-item> Terminal 3 </mat-list-item></a>

2. sidebar.module.ts need to import RouterModule for routerLink attributes to work.

When 'AF' is collapse, there is a big gap between AF and Dashboard in menu

That has to do with your ngIf condition. You should either set correct value for isShowing in component file of update ngIf

<div
      class="submenu"
      [ngClass]="{'expanded' : showSubmenu}"
      *ngIf="showSubmenu && (isShowing || isExpanded)">
  ...
</div>

Take a look at updated stackblitz.

Answered By - Dipen Shah