angularangular-materialmat-option

Angular mat-select, Set different template for items list and selected item

I'm using a mat-option in Angular like this:

 <mat-select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>

I want the template in the list of the mat-select to be different from the template of the selected item in the mat-form-field.

for example, if I chose Banana, the mat-form-field will display you chose: Banana but the item in the list will still be just Banana.

enter image description here

Solution

  • I solved it using mat-select-trigger

    and then inside you put whatever you want the template to be.

    <mat-select-trigger>
      {{"you chose:" + GetSelectedName()}}
</<mat-select-trigger>