Búsqueda de sitios web

javascript - cambiar el color del marcador de posición de mat-select de Angular mediante código

Estoy usando Angular 5 y me gustaría cambiar el color del texto del marcador de posición. El contenido de texto de la lista funciona perfectamente (puedo cambiar el color), pero no así el marcador de posición. No estoy buscando una solución codificada directamente en el CSS principal de la aplicación, necesito cambiarlo dinámicamente mediante código.

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

Respuesta #1

Abordar este tema sería difícil solo con código. Aquí hay una solución de manera semi-programática. La clave es usar ngClass. Sin embargo, necesitarías predefinir las clases.

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

Respuesta #2

Puedes usar

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

Ten en cuenta que este método pronto será desaprobado, por lo que puedes añadir el .mat-select-placholder a tu hoja de estilos global y también debería funcionar allí.

Artículos relacionados