How to change the style in Angular 5 material mat-select selected text when disabled

Question

How can I change the font color on the text showing the selected value from an Angular 5 material mat-select when it is set to disabled. Currently it defaults to gray color and I want to change it so that it display darkblue for both disabled and enabled.

  <mat-form-field>
    <mat-select placeholder="Select a Product" [(ngModel)]="selected" [disabled]="isDisabled" panelClass="my-select-panel-class">
      <mat-option *ngFor="let prod of products" [value]="prod.productID">
        {{ prod.key }}
      </mat-option>
    </mat-select>
  </mat-form-field>

Solution 1

Found out how to change the font-color on disable mat-select element. The above ngClass does not work on the font color. It does work on the font size.

The Styling mat-select in angular-material link had the most of the answer except to override the disable font color, you will need to override the style .mat-select-value-text

e.g.

::ng-deep .mat-select-value-text {
  color: rgba(0,0,0,.88);
}

Solution 2

You just need to use ngClass and pass appropriate conditions for styling the options. I'm considering selected is number. If it's an FormControl then just change prod?.productID==selected.value}

<mat-form-field>
<mat-select placeholder="Select a Product" [(ngModel)]="selected" [disabled]="isDisabled" panelClass="my-select-panel-class">
  <mat-option *ngFor="let prod of products" [value]="prod.productID" [ngClass]="{'font-bold':prod?.productID==selected}>
    {{ prod.key }}
  </mat-option>
</mat-select>

In CSS of this component define a class Font-bold as this

 .font-bold {
font-weight: bold
}

Comments

[Olga]

It is old angular rule

[Paulo Pedroso]

Worked like a charm. Angular 7 + material 7.3