javascript - endre farge på Angular mat-select plassholder via kode

Jeg bruker Angular 5, og vil gjerne endre fargen på plassholderteksten. Tekstinnholdet i listen fungerer perfekt (jeg kan endre fargen), men ikke plassholderen. Jeg søker ikke en hardkodet løsning via hoved-CSS-en til appen, jeg trenger å endre den dynamisk via kode.

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

Svar #1

Å ta opp dette emnet ville være vanskelig kun med kode. Her er en løsning på en semi-programmatisk måte. Nøkkelen er å bruke ngClass. Du ville imidlertid trengt å forhåndsdefinere klasser.

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

Svar #2

Du kan bruke

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

Husk at denne metoden snart vil bli avskrevet, så du kan legge til .mat-select-placholder i ditt globale stilark og det bør fungere der også.

Relaterte artikler