Angular Material - 選択されたmat-list-optionの色を変更する方法

CSSを使用する方法: mat-list-optionには、.mat-list-item-selectedというクラスが付いています。このクラスを使用して、選択された項目のスタイルを変更できます。例えば、次のようなCSSを使用して背景色を変更できます。
```
::ng-deep .mat-list-item.mat-list-item-selected {
 background-color: red;
}
```
上記の例では、選択された項目の背景色を赤に変更しています。このスタイルは、Angularのスタイルシートに追加するか、コンポーネントのスタイルファイルに追加することができます。

プログラムでスタイルを変更する方法: Angular Materialのmat-selection-listコンポーネントを使用する場合、選択された項目のスタイルをプログラムで変更することもできます。以下に例を示します。

<mat-selection-list #list>
 <mat-list-option *ngFor="let item of items" [value]="item">
   {{ item }}
 </mat-list-option>
</mat-selection-list>

import { Component, ViewChild } from '@angular/core';
import { MatSelectionList } from '@angular/material/list';
@Component({
 // コンポーネントの設定
})
export class MyComponent {
 @ViewChild('list') list: MatSelectionList;
 changeSelectedOptionColor() {
   const selectedOptions = this.list.selectedOptions.selected;
   selectedOptions.forEach(option => {
     option._getHostElement().style.backgroundColor = 'red';
   });
 }
}

上記の例では、mat-selection-listのselectedOptionsプロパティを使用して、選択された項目のリストを取得し、それぞれの要素の背景色を赤に変更しています。

これらは、mat-list-optionの選択された項目の色を変更するためのいくつかの方法です。選択された項目に適用するスタイルを選ぶ方法は、プロジェクトの要件や好みによって異なる場合があります。