Currently, I am working with a navigation view that utilizes the MatSidenavModule. The issue I am encountering is on mobile screens. When I click a mat-list-item, the mat-sidenav closes as expected. However, upon opening the mat-sidenav again, Material always marks the first item in the list as active. Interestingly, if I use a div, it functions properly (displaying in red). The problem arises when using mat-list-item. I am unsure of what mistake I may be making. Any help would be appreciated. Thanks!
<mat-sidenav-container [hasBackdrop]="false">
<mat-sidenav
#sidenav [mode]="windowInnerWidth > 1200 ? 'side' : 'push'"
[opened]="windowInnerWidth > 1200 ? true : false"
>
<div class="mat-typography">
<h2>Material</h2>
</div>
<mat-divider></mat-divider>
<mat-nav-list>
<!-- it does not work -->
<mat-list-item
*ngFor="let menuItem of menuItems"
[routerLink]="[menuItem.path]"
routerLinkActive="router-active"
(click)="windowInnerWidth < 1200 ? sidenav.close() : null">
<span matListItemTitle>{{menuItem.title}}</span>
</mat-list-item>
<!-- it works -->
<div *ngFor="let menuItem of menuItems"
[routerLink]="[menuItem.path]"
routerLinkActive="router-active"
(click)="windowInnerWidth < 1200 ? sidenav.close() : null">
{{menuItem.title}}
</div>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<app-toolbar [windowInnerWidth]="windowInnerWidth" (toggleEvent)="toggleSidenav()"></app-toolbar>
<div class="router-outlet-container">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>.router-active {
color: red;
}