Activate mat-list-item on click in Angular

Question

I have a mat-nav-list with the following code:

<a mat-list-item routerLinkActive="list-item-active" routerLink="/dashboard">
  <mat-icon>dashboard</mat-icon> Dashboard
</a>
<mat-list-item (click)="showSubmenu = !showSubmenu" routerLinkActive="list-item-active" routerLink="/department" class="parent">
            <span class="full-width" *ngIf="isExpanded || isShowing">Department</span>
            <mat-icon mat-list-icon>layers</mat-icon>
            <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
</mat-list-item>
<div class="submenu" [ngClass]="{'expanded' : showSubmenu}" *ngIf="isShowing || isExpanded">
            
    <mat-list-item (click)="showSubSubMenu = !showSubSubMenu" class="parent">
        <span class="full-width" *ngIf="isExpanded || isShowing">Human Resource</span>
        <mat-icon mat-list-icon>people</mat-icon>
        <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubSubMenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
    </mat-list-item>
    <div class="submenu" [ngClass]="{'expanded' : showSubSubMenu}" *ngIf="isShowing || isExpanded">
        <a mat-list-item routerLinkActive="list-item-active" routerLink="/department/hr/visa_pp">
            <mat-icon>insert_drive_file</mat-icon>Visa / Passport 
        </a>
    </div>
</div>

Output:

Here, I want to activate "Department" nav-lit-item on click. I don't have any page to display for Department.

Thank you