CODEWITHSUNDEEP
javascriptcssangulartypescriptangular-material
Iteration
Iteration

Reputation: 693

change angular mat-select placeholder color via code

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>

Upvotes: 11

Views: 26611

Answers (3)

Mostafa Bagheri
Mostafa Bagheri

Reputation: 413

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.

Upvotes: 5

Vega
Vega

Reputation: 28738

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

Upvotes: 12

user6749601
user6749601

Reputation:

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. ;)

Upvotes: 0

Related Questions