Как выделить выбранный элемент-мат-лист цветом в угловой?

Я так думаю

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>

Поскольку вы уже используете routerLink, вам следует воспользоваться преимуществами 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;
}

Когда элементы списка куда-то перемещаются, следует использовать <mat-nav-list> с элементами <a mat-list-item> в качестве элементов списка. Навигационный список будет отрисован с использованием role = "navigation", и ему может быть предоставлен aria-label для предоставления контекста по набору представленных опций навигации. Дополнительный интерактивный контент, такой как кнопки, не следует добавлять внутри якорей.

<mat-nav-list>
    <a mat-list-item 
    *ngFor = "let report of category.reports">
    <span>{{ report.reportName }}</span>
    </a>
</mat-nav-list>

Это можно использовать, если вы хотите специально настроить таргетинг и изменить цвет. Для эффектов зависания вышеупомянутый должен работать нормально

.mat-list-item {
background-color: #fefefe; 
}

Мы можем добиться этого, изменив стиль ниже.

.mat-nav-list .mat-list-item:focus,
.mat-action-list .mat-list-item:focus,
.mat-list-option:focus {
  background: #76b900 !important;
}

Другой подход - использовать атрибут отобранный по арии элемента mat-list-option

.mat-list-option[aria-selected = "true"] {
  background: #76b900 !important;
}