web-dev-qa-db-fra.com

changer angular couleur de l'espace réservé mat-select via le code

J'utilise Angular 5, et je voudrais changer la couleur du texte de l'espace réservé. Le contenu du texte de la liste fonctionne parfaitement (je peux changer la couleur), mais pas l'espace réservé. I ' Je ne recherche pas une solution codée en dur via le CSS principal de l'application, je dois la changer dynamiquement via le 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>
javascriptcssangulartypescriptangular-material
7
Iteration

Aborder ce sujet serait difficile avec du code uniquement. Voici une solution de manière semi-programmatique. L'indice étant d'utiliser ngClass. Vous devrez cependant prédéfinir les classes.

[~ # ~] 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;
}

[~ # ~] démo [~ # ~]

5
Vega

Vous pouvez créer vos propres classes CSS et les ajouter dynamiquement via la directive [ngClass].

Dans votre modèle HTML

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

Dans votre fichier CSS

.classRed::placeholder {
  color: red;
}

.classGreen::placeholder {
  color: green;
}

Notez que, selon le navigateur que vous prenez en charge, différentes implémentations sont nécessaires:

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

Et dans votre fichier TypeScript

private colour = 'green';

Ceci n'est qu'un exemple, mais il vous permet d'ajuster dynamiquement la couleur du texte de l'espace réservé lors de l'exécution. Vous êtes libre de l'optimiser selon vos besoins. ;)

0
Lynx 242

Vous pouvez utiliser

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

Gardez à l'esprit que cette méthode sera bientôt dépréciée, vous pouvez donc ajouter le .mat-select-placholder à votre feuille de style globale et cela devrait également fonctionner.

0
Mostafa Bagheri