CODEWITHSUNDEEP
cssangularangular-material
Flash
Flash

Reputation: 1014

Angular 7 - Change color of Mat-select-value based on condition

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.

Upvotes: 5

Views: 2066

Answers (1)

Deepu Reghunath
Deepu Reghunath

Reputation: 9653

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;
     }
     .one .mat-select-value-text {
      color : green;
     }
   }

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

Upvotes: 6

Related Questions