Angular mat-list-item routerLink not working

user_1338585 0
Viewed 5774

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>

enter image description here

angular-material angular
5 Answers

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>
  1. 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.

user_11778140
  1. check the console to see if there are any error messages that might help (before and after clicking on links)
  2. type terminal directly in the browser address bar to see if the terminal page really works
  3. you do need the / before the path: routerLink='/terminal'
user_63123750

You need to import RouterModule (from @angular/router) in your SidebarModule. Otherwise Angular doesn't know what do with routerLink attribute.

In fact, if you used input binding for routerLink instead of using it as a static attribute, you would get a helpful compiler error from Angular:

// sidebar.component.html
<a mat-list-item [routerLink]="'terminal'">Terminal 1</a>

// error triggered
Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("howSubmenu}"
user_26388740

Try importing

import {MatListModule} from '@angular/material/list';
import { RouterModule, Routes } from '@angular/router';
user_95996410

General answer: In case anywhere in the application component if routerLink not working

then check its related ###.module.ts file and check RouterModule is imported or not.

If not then Add import { RouterModule } from '@angular/router'; in ####.module.ts file.

And your routerLink will start working!!!

user_20548510
Related