Ionic change text displayed on ion-select when an option is selected

Question

I don't know if you get the idea. What I want to do is having an ion-select with option, and when user selects, for example, "Albania (+355)" and press OK button, in the select will only be displayed "+355" instead of "Albania (+355)"

add-contact.html

      <ion-select [(ngModel)]="selected_value" (ionChange)="getCountry(selected_value)" placeholder="País">
        <ion-option [value]="countries" *ngFor="let countries of country">
          {{countries.country_name}} ({{countries.dialling_code}})
        </ion-option>
      </ion-select>

add-contact.ts

country = [{ "country_code": "AL", "country_name": "Albania","dialling_code": "+355" },
           { "country_code": "DZ", "country_name": "Algeria", "dialling_code":"+213" }];

This is what I have: name-code-displayed

This is what I try to display: only-code-displayed

Answer 1

According to the Documentation,

ion-select has an input property selectedText which:

The text to display instead of the selected option's value.

You can try using [selectedText]="selected_value.dialing_code".

 <ion-select [(ngModel)]="selected_value" (ionChange)="getCountry(selected_value)" [selectedText]="selected_value.dialing_code">

        <ion-option [value]="countries" *ngFor="let countries of country">
          {{countries.country_name}} ({{countries.dialing_code}})

        </ion-option>
      </ion-select>