DEV Community

Salah Hasanin
Salah Hasanin

Posted on

Answer: How to highlight selected mat-list-item with color in angular?

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)