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>

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>

• javascript
• css
• angular
• typescript
• angular-material

3 Answers 3

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

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.

You can create your own CSS-classes and add them dynamically via the [ngClass] directive.

In your HTML-template

<input [ngClass]="{ 'classRed': colour==='red' , 'classGreen': colour==='green' }" placeholder="Type something here...">

In your CSS-file

.classRed::placeholder {
  color: red;
}

.classGreen::placeholder {
  color: green;
}

Note that, according to the browser you support, there are some different implementations needed:

.classRed::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: red;
   opacity: 1; /* Firefox */
}
.classGreen::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: green;
   opacity: 1; /* Firefox */
}
.classRed:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: red;
}
.classGreen:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: green;
}
.classRed::-ms-input-placeholder { /* Microsoft Edge */
    color: red;
}
.classGreen::-ms-input-placeholder { /* Microsoft Edge */
    color: green;
}

And in your typescript file

private colour = 'green';

This is just an example, but it lets you adjust the color of the placeholder's text dynamically at runtime. You're free to optimize it to your needs. ;)