如何自定义角度垫选项的选定选项的样式

Question

I am working on an angular application using the angular material library.

component.html

    <mat-select>
        <mat-option *ngFor="let option of options" [value]="option.value">
          <span> {{ option.name }} </span>
          <span class="colorful-badge-class"> {{ option.label }} </span>
        </mat-option>
    </mat-select>

On dropdown, the option works nicely as expected with each option having the option name and a coloured badge beside it. However, when the option is selected, the option is no longer styled inside the form control field.

In the inspected HTML, the selected field is shown as:

<span class="mat-select-min-line ng-star-inserted">option-name option-label</span> 

not even respecting the original DOM structure of the option.

Is there a way to choose what shows up in the form control field after the option is selected (eg just showing option.name and not needing the label), or possibly style the selected field keeping the structure passed to the original mat-option ?

Any help is appreciated since there seems to be no documentation on the <mat-option> component.

Answer 1

Work with <mat-select-trigger> element to customize the selected option text.

<mat-select
  [formControl]="selectedOption"
  (selectionChange)="onSelectOption($event)"
>
  <mat-select-trigger>
    <span class="red" *ngIf="selectedOptionObj">
      {{ selectedOptionObj.name }}
    </span>
  </mat-select-trigger>
  <mat-option *ngFor="let option of options" [value]="option.value">
    <span> {{ option.name }} </span>
    <span class="colorful-badge-class"> {{ option.label }} </span>
  </mat-option>
</mat-select>

1. Create selectedOptionObj variable to store the selected option object.
2. With selectionChange event to trigger onSelectOption method for storing selected option object by selected value.

selectedOptionObj: any;

onSelectOption(event: any) {
  let selectedValue = event.value;

  this.selectedOptionObj = this.options.find((x) => x.value == selectedValue);
}

Sample StackBlitz Demo

---

Reference

Select with custom trigger text