CODEWITHSUNDEEP
angularangular-material
Rhett Harrison
Rhett Harrison

Reputation: 432

Mat-select make the background the same as the selected mat-option

<mat-form-field>
  <mat-select [formControlName]="name">
    <mat-option
      [value]="option.id"
      [ngStyle]="{backgroundColor: option.color}"
      *ngFor="let option of list; let i = index"
      >
      {{option.title}}
    </mat-option>
  </mat-select>
</mat-form-field>

I need to set the background-color of the mat-select to the same as the selected option option.color. I am going to be moving this to its own component soon, and I can just keep track of some variable that is the selected option and set the background-color of mat-select in that way.

I am wondering what other ideas are out there that might be easier

Upvotes: 0

Views: 1199

Answers (1)

Udhayakumar
Udhayakumar

Reputation: 437

In your styles.scss file

.mat-mdc-option.mat-mdc-option-active{

    background-color:#fff; //The color you want

}

OR in your _theme-reset.scss

@use "sass:map";
@use "@angular/material" as mat;

@mixin theme-reset($theme) {
    .mat-mdc-option.mat-mdc-option-active{

        background-color:var(--mdc-theme-surface, #fff); // Get the color and set
    }
}

}

It will be applied to all mat-select. If you want to apply a particular mat-select you have add class to the mat-select and CSS

Upvotes: 2

Related Questions