4

I have a mat select and I would like to change the color of the selected value based on a condition. basically to show the user that a change was made. I know that I can access the mat-select-value from the styles but not sure how to implement a condition to it using ng-class:

<mat-form-field>
      <mat-select name="list"  
      [style.color]="myCondtition ? 'none': 'green'"
      (selectionChange)="change()">
        <mat-option *ngFor="let option of options" [value]="currentOption">
          {{option.viewvalue}}
         </mat-option>
      </mat-select>

I was able to get things like [style.font-weight], [style.background-color] and [style.font-size] to work but there is no font-color and just [style.color]only seems to work with inputs.

R. Richards
  • 24,603
  • 10
  • 64
  • 64
Flash
  • 924
  • 3
  • 22
  • 44
  • I think you can find useful answer [here](https://stackoverflow.com/questions/52813506/angular-mat-select-text-color-doesnt-change/52813599) – SillyCoon Sep 03 '20 at 16:54
  • 1
    @SillyCoon I checked there but that only worked on the option list – Flash Sep 03 '20 at 17:40

1 Answers1

4

you can use the normal class property with the condition

<mat-select class="{{myCondition ? 'one' : 'two'}}" > ... </mat-select>

and give the style to the corresponding class

::ng-deep {
    .two .mat-select-value-text {
      color : red;
     }
   }

https://stackblitz.com/edit/angular-mat-select-example-6rylbe?file=src%2Fapp%2Fapp.component.html

Deepu Reghunath
  • 8,132
  • 2
  • 38
  • 47
  • 1
    Works NIcely! I was able to put the style in the global style sheet and avoid using ::ng-deep – Flash Sep 03 '20 at 18:48