To change text-color in mat-list-option

Question

I am using mat-selection-list component in which mat-list-option is displaying a contact list as shown below:

Now the background-color is changing when i click particular contact-name(eg Graeme swan) and background-color is constant until i click another contact , But i want to change the text-color also and the tex-color should be constant until i click new contact.

Hers is the stackblitz link.

Answer 1

to style your selection in list components as

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>

add these in ts file

  selectedItem:number = null;

      ....

  selectionChanged(i) {
      selectedItem = i;
  }

add these to css

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

slackBlitz url