Website-Suche

javascript - Änderung der Platzhalterfarbe von Angular mat-select über Code

Ich benutze Angular 5 und möchte die Platzhaltertextfarbe ändern. Der Textinhalt der Liste funktioniert einwandfrei (ich kann die Farbe ändern), aber nicht der Platzhalter. Ich suche keine fest codierte Lösung über das Haupt-CSS der App, ich muss es dynamisch über Code ändern.

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

Antwort #1

Dieses Thema nur mit Code anzugehen, wäre schwer. Hier ist eine Lösung auf halb-programmatische Weise. Der Hinweis besteht darin, ngClass zu verwenden. Sie müssten jedoch die Klassen vorher definieren.

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

Antwort #2

Du kannst verwenden

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

Beachten Sie, dass diese Methode bald veraltet sein wird, daher können Sie das .mat-select-placholder zu Ihrem globalen Stylesheet hinzufügen und es sollte dort ebenfalls funktionieren.

Verwandte Artikel