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

Question

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

Current list

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

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>

Porker

Answer 1

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

Imbecility

I haven't implemented but from the demo i think this will work. However, Where can i find the documentation for the attribute likes aria-selected?. – Porker

please search the net, because i looked for the dom changes whenever i checked the mat-list-option and found that this attribute was triggered, so i went ahead with the attribute to style mat-list-option tag. – Imbecility

@TanmayParmar please upvote the answer as well, its helpful for users looking for answers. – Imbecility

Great solution. I've been using a method in typescript that takes an item an checks if it's in the list of selected items, but targeting the actual attributes angular already provided is much better. Thanks for pointing it out. – Respective

Answer 2

Drop Down:

The mat-list-option has mat-option.mat-active which triggered when option is active and mat-option.mat-selected when an option is selected. Add the following to your CSS to modify the active or selected styles, depends on your need.

.mat-option.mat-active {
  background: blue !important;
}

.mat-option.mat-selected {
  background: red !important;
}

Working Demo

Selection List:

The selection list has aria-selected attribute and by default it is false. It changes to true if you select the item. All you need is to set CSS as below:

.mat-list-option[aria-selected="true"] {
  background: rgba(200, 210, 90, 0.7);
}

Working Demo

Bioscope

i am using selection list. this is dropdown. – Porker

@TanmayParmar Edit my answer for selection list. – Bioscope

Answer 3

The accepted answer works fine, but it uses a hardcoded color value (background: rgba(0, 139, 139, 0.7)). This approach will actually break your styles and colors if you decide to switch to another pre-build material theme or use a custom theme (as described in Theming your Angular Material app page).

So, if you use SCSS, you can use the following code in your component's style file:

@import '~@angular/material/theming';

mat-list-option[aria-selected="true"] {
  background: mat-color($mat-light-theme-background, hover, 0.12);
}

The above code is adapted from mat-select options - in this way, you will have a consistent look in the entire app: .mat-option.mat-selected:not(.mat-option-multiple) { background: mat-color($background, hover, 0.12);}

Demo: https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color-change-qaq1xr

Or, if you use a dark theme, change code as follows:

mat-list-option[aria-selected="true"] {
  background: mat-color($mat-dark-theme-background, hover, 0.12);
}

Demo: https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color-change-w8beng

If you just want to use a custom color, I suggest to pick one from Material Specs, that are also exposed in Angular Material Design scss.

$primaryPalette: mat-palette($mat-green);

mat-list-option[aria-selected="true"] {
  background: mat-color($primaryPalette, 500);
}

Demo: https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color-change-tt3nyj

Schaeffer

Answer 4

Sometimes using [aria-selected] seems too 'obtuse'.

You can also grab the selected state of a node and use that as required.

Example 1: You have a child component you need to pass the state to

<mat-list-option #option>

   <app-custom-list-option-widget [selected]="option.selected"></app-custom-list-option-widget>

</mat-list-option>

Example 2: You want to set a custom css class instead of using [aria-selected]

.is-selected { color: red; }

Then in the template:

<mat-list-option #option>

   <span [class.is-selected]="option.selected"> Option text </span>

</mat-list-option>

Tumular

Answer 5

For mat-list-option properties css changes,

to change onHover css :

   .mat-list-option:hover {
      width: 270px!important;
    }

to change OnActive css:

 .mat-list-option[aria-selected="true"] {
      width: 270px!important;
    }
    .mat-list-option:active,
    .mat-list-text:active{
    background-color: none!important;
    }

Patchouli