mat-select customize display label for selected option

Issue

I have [value]="country.dial code" and inside <mat-option> I have 2 values {{country.dialcode}} {{country.name}}. When the drop-down is toggled, it shows both name and dial code (as expected) and after selecting, the selected value shows both name and dial code. I want to display only the dial code. The drop-down has the dial code (country) name and flag. I simply want to display the dial code after selecting it.

Drop-down HTML

<ng-container [formGroup]="DialCode">
  <mat-form-field  appearance="outline" class="mb-0 mt-3 country-code px-1" >
    
    <mat-select class="w-100" formControlName="countryCode" >
      <input type="text" aria-label="Number" class="py-1 search" formControlName="countryCodeInput" matInput name="phoneCode" placeholder="search country code" >      
      <mat-option *ngFor="let country of filteredCountries | async" [value]="country.dialCode">
        {{country.dialCode}} {{country.name}}
        <img width="20" height="20" [src]="'assets/images/flags/'+parse(country.code) +'.svg'" alt="img">
      </mat-option>
    </mat-select>
  </mat-form-field>
</ng-container>

.ts file

countryCodeList: COUNTRY[] = CONSTANT.COUNTRY_CODE;
filteredCountries!: Observable<COUNTRY[]>;

Model

export interface COUNTRY {
    name: string
    dialCode: string
    code?: string
}

Model values

export const COUNTRY_CODE = [
    {
        name: 'Afghanistan',
        dialCode: '+93',
        code: 'AF',
    },
    {
        name: 'Aland Islands',
        dialCode: '+358',
        code: 'AX',
    },  // so on..
]

Solution

You can use Mat-Select Trigger to customize the display of the selected option.

<mat-select class="w-100" formControlName="countryCode">

  <mat-select-trigger>
    {{ DialCode.controls['countryCode'].value }}
  </mat-select-trigger>

  <input
    type="text"
    aria-label="Number"
    class="py-1 search"
    formControlName="countryCodeInput"
    matInput
    name="phoneCode"
    placeholder="search country code"
  />
  <mat-option
    *ngFor="let country of filteredCountries | async"
    [value]="country.dialCode"
  >
    {{ country.dialCode }} {{ country.name }}
    <img
      width="20"
      height="20"
      [src]="'assets/images/flags/' + parse(country.code) + '.svg'"
      alt="img"
    />
  </mat-option>
</mat-select>

Sample Demo on StackBlitz

Answered By - Yong Shun