web-dev-qa-db-ja.com

変更angular mat-select placeholder color by code

Angular 5を使用していて、プレースホルダーのテキストの色を変更したいのです。リストのテキストコンテンツは完全に機能しています（色を変更できます）が、プレースホルダーではありません。私はmアプリのメインのcssを介してハードコードされたソリューションを検索しないので、コードを使用して動的に変更する必要があります。

<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>
javascriptcssangulartypescriptangular-material
7
Iteration

この問題への対処は、コードだけでは難しいでしょう。これが半プログラム的な解決策です。 ngClassを使用する手がかりです。ただし、クラスを事前定義する必要があります。

[〜＃〜] 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 [〜＃〜]

5
Vega

独自のCSSクラスを作成し、[ngClass]ディレクティブを介して動的に追加できます。

HTMLテンプレート

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

あなたのCSSファイルで

.classRed::placeholder {
  color: red;
}

.classGreen::placeholder {
  color: green;
}

サポートするブラウザに応じて、いくつかの異なる実装が必要になることに注意してください。

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

そして、あなたのTypeScriptファイルで

private colour = 'green';

これは単なる例ですが、実行時にプレースホルダーのテキストの色を動的に調整できます。ニーズに合わせて自由に最適化できます。 ;）

0
Lynx 242

使用できます

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

このメソッドは間もなく廃止されるので、.mat-select-placholderをグローバルスタイルシートに追加すると、そこでも機能するはずです。

0
Mostafa Bagheri