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>

Solution 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

Solution 2

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

Solution 3

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

Comments

[Tanmay Parmar]

i am using selection list. this is dropdown.

[Maihan Nijat]

@TanmayParmar Edit my answer for selection list.

[Tanmay Parmar]

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?.

[Abhishek Kumar]

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.

[Abhishek Kumar]

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

[SleekPanther]

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.