Angular Material Select Value, displaying other values . I want to customize display value

I have [value]="country.dial code",and inside mat option I have 2 values {{country.dialcode}} {{country.name}}. when the drop-down is toggled its 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 dial code. The drop-down has dial code (country)name and (country) flag. I simply want to display Dial-code after selecting

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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',
    },soo 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