CODEWITHSUNDEEP
cssangularcolorsangular-material
tazza
tazza

Reputation: 141

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

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>

Upvotes: 2

Views: 13237

Answers (3)

Muhammad Waqas Dilawar
Muhammad Waqas Dilawar

Reputation: 2322

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
}

Upvotes: 1

tazza
tazza

Reputation: 141

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);
}

Upvotes: 6

user1995138
user1995138

Reputation: 24

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

Upvotes: 0

Related Questions