Чтобы изменить цвет текста в mat-list-option

Question

Я использую mat-selection-list компонент, в котором mat-list-option отображает contact list, как показано ниже:

Теперь background-color меняется, когда я щелкаю конкретный contact-name (например, Грэм-лебедь), и background-color постоянен, пока я не щелкаю по другому контакту, но я хочу изменить также text-color и текст цвет должен быть постоянным, пока я не нажму на новый контакт .

Hers - это ссылка stackblitz .

Answer 1

, чтобы оформить ваш выбор в списке компонентов как

HTML

<mat-selection-list #linkList >
  <mat-list-option *ngFor="let link of links;index as i" (selectionChange)="selectionChanged(i)" [class.active]="selectedItem === i">
    <a mat-list-item> <span class="contact-names">{{ link }}</span> </a>
  </mat-list-option>
</mat-selection-list>

добавить их в файл ts

  selectedItem:number = null;

      ....

  selectionChanged(i) {
      selectedItem = i;
  }

добавить их в css

.mat-list-item.active .contact-names{
  color: red;
}

slackBlitz url