change angular mat-select placeholder color via code

Question

I'm using Angular 5, and would like to change the placeholder text color. The text content of the list is perfectly working (I can change the color), but not the placeholder. I'm not searching an hardcoded solution via the main css of the app, I need to change it dynamically via code.

<mat-form-field>
    <mat-select placeholder="{{'TXTKEY' | translate }}" [style.color]="config.textColor">
        <mat-option *ngFor="let item of items" [value]="item.identifier" (click)="OnChange(item)">
            <div [style.color]="config.textColor"> {{item.name}}</div>
        </mat-option>
    </mat-select>
</mat-form-field>

Solution 1

Addressing this subject would be hard with code only. Here is a solution in semi-programatical way. The clue being to use ngClass. You would need to predefine classes, though.

HTML

<mat-form-field>
    <mat-select [ngClass]="className" placeholder="{{someText}}">
        <mat-option *ngFor="let item of items" [value]="item.value">
            {{ item.viewValue }}
        </mat-option>
    </mat-select>
</mat-form-field>

Typescript:

  someText = "Enter your choice";
  someCondition = true;

  get className() {
    return this.someCondition ? 'class1' : 'class2';
  }

CSS:

.class1  .mat-select-placeholder {
  color:red !important;
}

.class2  .mat-select-placeholder {
  color:blue !important;
}

DEMO

Solution 2

You can use

:host::ng-deep .mat-select-placeholder {
   color: red;
} 

Keep in mind this method will soon be depreciated, so you can add the .mat-select-placholder to your global stylesheet and it should work there also.

Comments

[Kevin Oswaldo]

You can also add this in the .styles.css and it works without the :host