Styling angular mat-select on condition

Question

I am using <mat-select> and I would like to have some of the options with a bold style when a condition is true.

Currently, the options are bold in the dropdown choices, but once the option is selected, the style is not applied to the selection in the text field.

How can I apply the style to the text field after the selection ?

Here is a code sample :

<mat-form-field>
          <mat-label><span translate="entities.annexe"></span></mat-label>
          <mat-select [(ngModel)]="p.annexe" formControlName="annexe">
            <mat-option *ngFor="let annexe of annexesEnums()" [value]="getNameFromValue(annexe)">
              <span [style.font-weight]="annexe != 'Default' ? 'bold' : 'normal'">{{annexe}}</span>
            </mat-option>
          </mat-select>
 </mat-form-field>

Answer 1

If you want that style to get applied to the selected value after the selection, you will have to apply it to select itself. Applying [style.font-weight]="annexe != 'Default' ? 'bold' : 'normal'" to mat-select should do it. It would be better to take it to common place in component and refer it from there.

Please refer -https://stackblitz.com/edit/angular-xgnq4k?file=app/select-overview-example.ts