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
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>