How to highlight selected mat-list-item with color in angular?
We can achieve this by below style changes
.mat-nav-list .mat-list-item:focus,
.mat-action-list .mat-list-item:focus,
.mat-list-option:focus {
background: #76b900 !important;
}
I think like so
clickedItem: 'dashboard' | 'notification' | 'comments';
onClick(item: 'dashboard' | 'notification' | 'comments') {
this.clickedItem = item;
}
.red {
background-color: red;
}
<mat-list>
<mat-list-item [ngClass]="{red: clickedItem === 'dashboard'}" (click)="onClick('dashboard')" style="cursor: pointer" routerLink="/base/dashboard">Dashboard</mat-list-item>
<mat-list-item [ngClass]="{red: clickedItem === 'notification'}" (click)="onClick('notification')" style="cursor: pointer" routerLink="/base/notification">Notification</mat-list-item>
<mat-list-item [ngClass]="{red: clickedItem === 'comments'}" (click)="onClick('comments')" style="cursor: pointer" routerLink="/base/comments">Comments</mat-list-item>
</mat-list>
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;
}