2

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>
tazza
  • 141
  • 1
  • 2
  • 7

3 Answers3

6

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);
}
tazza
  • 141
  • 1
  • 2
  • 7
1

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
}
Muhammad Waqas Dilawar
  • 1,844
  • 1
  • 23
  • 34
0

Use ngClass. You can pass an object with conditions and strings matching CSS classes. Something like this:

Take a look here https://angular.io/api/common/NgClass

user1995138
  • 24
  • 3