angularangular-materialangular2-templateangular-material2angular2-material

Angular Material - Change color of mat-list-option on selected

How can I change the color of selected option of mat-list-option? Right now I have something like this:

Current list enter image description here

I want to change the color of whole option or card 'on select' to green. Something like this: enter image description here

My code is like this:

<mat-selection-list #list>
    <mat-list-option *ngFor="let yuvak of yuvaks">
    {yuvak.name}
    {yuvak.phonenumber}
     </mat-list-option>
</mat-selection-list>
Solution

  • You can use aria-selected="true" attribute from mat-list-option tag to target the selected option,
    and provide corresponding css properties for the same.

    mat-list-option[aria-selected="true"] {
  background: rgba(0, 139, 139, 0.7);
}

    Stackblitz Working Demo