Как изменить стиль в материале Angular 5 - выберите выделенный текст, если он отключен

Question

Как изменить цвет шрифта в тексте, отображающем выбранное значение, из материала Matular 5, если он отключен. В настоящее время по умолчанию используется серый цвет, и я хочу изменить его так, чтобы он отображал темно-синий как для отключенных, так и для включенных.

  <mat-form-field>
    <mat-select placeholder="Select a Product" [(ngModel)]="selected" [disabled]="isDisabled" panelClass="my-select-panel-class">
      <mat-option *ngFor="let prod of products" [value]="prod.productID">
        {{ prod.key }}
      </mat-option>
    </mat-select>
  </mat-form-field>

Answer 1

Узнал, как изменить цвет шрифта при отключении элемента mat-select. Приведенный выше ngClass не работает с цветом шрифта. Это работает на размер шрифта.

Ссылка Styling mat-select в angular-material содержала большую часть ответа, за исключением того, что для переопределения цвета отключенного шрифта вам потребуется переопределить стиль .mat-select-value-text

, например

::ng-deep .mat-select-value-text {
  color: rgba(0,0,0,.88);
}

Answer 2

Вам просто нужно использовать ngClass и передать соответствующие условия для стилизации параметров. Я рассматриваю выбранный номер. Если это FormControl, тогда просто измените prod? .ProductID == selected.value}

<mat-form-field>
<mat-select placeholder="Select a Product" [(ngModel)]="selected" [disabled]="isDisabled" panelClass="my-select-panel-class">
  <mat-option *ngFor="let prod of products" [value]="prod.productID" [ngClass]="{'font-bold':prod?.productID==selected}>
    {{ prod.key }}
  </mat-option>
</mat-select>

В CSS этого компонента определите класс Font-bold как этот

 .font-bold {
font-weight: bold
}

Answer 3

Используйте ngClass. Вы можете передать объект с условиями и строками, соответствующими классам CSS. Примерно так:

Взгляните сюда https://angular.io/api/common/NgClass