Angular 7 - Customize Mat-select-value color depending on a specific condition

Question

Angular 7 - Customize Mat-select-value color depending on a specific condition

One issue I am facing is changing the color of a selected value in a mat select based on a condition. This change should be visually apparent to the user. Although accessing mat-select-value from the styles is possible, implementing a condition using ng-class is proving to be challenging:

<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>

While properties like [style.font-weight], [style.background-color], and [style.font-size] can easily be manipulated, I have noticed that there is no direct way to adjust font-color. Furthermore, it seems that [style.color] only works with inputs.

css angular angular-material

Answer 1

Answer №1

Utilize the regular class attribute based on a condition

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

Then apply styles to each class accordingly

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

Check out this example on StackBlitz for more details!

Answer 2

Utilize the regular class attribute based on a condition

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

Then apply styles to each class accordingly

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

Check out this example on StackBlitz for more details!

Angular 7 - Customize Mat-select-value color depending on a specific condition

Answer №1

Similar questions

The issue with the <Button> component not properly linking in next.js

Personalize ng-multiselect-dropdown in order to establish connections with multiple model fields

Is the Mini Cart button in Woocommerce not aligned properly?

The server's file URLs are modified within the page source of a WordPress site

Obtaining the calculated background style on Firefox

An easy way to attach a Contextmenu to a specific element

Angular's responsiveness is enhanced by CSS Grid technology

Strategies for incorporating a string into an ng-template using HTML

Jquery failing to function properly when scrolling

Choosing the most suitable stylesheet in Angular 8 when multiple CSS files are present

Overlay text on top of image with fading transparency when hovering over it

I have to make sure not to input any letters on my digipas device

The Boostrap background is failing to display as expected in CSS, and the `position: fixed` property is

If viewed on a mobile device, separate the array (indexed list) into two rows

The issue arises when trying to pass multiple parameters with the Angular 2 router and encountering

Off-center rotation of an element - seeking solution [closed

Switching the position to fixed causes it to lose its justification functionality

Why does HttpClient in Angular 4 automatically assume that the request I am sending is in JSON format?

``Only Firefox supports jQuery animations, all other browsers fail to render them properly

Guide to switch background image using querySelector