Custom template for selected option in mat-select?-CodePudding

Customizing how your mat-options look inside your mat-select is pretty straightforward:

<mat-option>
  black text
  <span style="color: red;">
    red text
  </span>
</mat-option>

However, this doesn't carry over to the option displayed once it is selected:

I see that I can make changes to the dropdown panel by adding them before the mat-option list, or using the panelClass attribute for styling; but I don't see anything to allow me to customize how the selected option is displayed. Is there any way to customize the contents of the selected option?

CodePudding user response：

if you want to change the view value of the option, you can subscribe to selectionChange output, and then change the view value of a specific option appropriately. If you want to have specific styles you can build on the selected prop of the option as well

CodePudding user response：

I was finally able to figure out how to do this - it's just that mat-select-trigger isn't exactly the most intuitive name for this element. But put your custom template inside the mat-select-trigger, and it works perfectly:

<mat-select>
  <mat-select-trigger>
    black text
    <span style="color: red;">
      red text
    </span>
  </mat-select-trigger>
  <mat-option>
    black text
    <span style="color: red;">
      red text
    </span>
  </mat-option>
</mat-select>