Since you're using routerLink
already, you should take advantage of routerLinkActive
html:
<mat-list>
<mat-list-item style="cursor: pointer" routerLink="/base/dashboard" [routerLinkActive]="['is-active']">Dashboard</mat-list-item>
<mat-list-item style="cursor: pointer" routerLink="/base/notification" [routerLinkActive]="['is-active']">Notification</mat-list-item>
<mat-list-item style="cursor: pointer" routerLink="/base/comments" [routerLinkActive]="['is-active']">Comments</mat-list-item>
</mat-list>
css:
.is-active {
background-color: red;
}
Top comments (0)