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

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"  >
    
    <mat-select  formControlName="countryCode" >
      <input type="text" aria-label="Number"  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',
    },soo on..

CodePudding user response：

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

<mat-select  formControlName="countryCode">

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

  <input
    type="text"
    aria-label="Number"
    
    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