CODEWITHSUNDEEP
ionic-frameworkionic2ion-select
Bryan Arreola
Bryan Arreola

Reputation: 307

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

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

Upvotes: 6

Views: 13565

Answers (2)

Suraj Rao
Suraj Rao

Reputation: 29635

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>

Upvotes: 9

Elizandro Tovar
Elizandro Tovar

Reputation: 11

I could also use the statement of the ionChange event as follows:

(ionChange)="getCountry($event)"

In this way, the component captures the value that is selected in the select to then process the information you want to display.

Upvotes: 0

Related Questions