Ion-select with dynamic options

Simple, use a function calling your defined ngmodel values like (id, salesid, thingid, dumbId).

As long as you’re using observables, in the controller, these values are defined and can be clicked back on a button, while in a list, for example.

Is that any way to add icon in ion-option?

Thanks it Worked for me:slight_smile:

Hi Brandy, I was hoping you could tell me where I’m going wrong with building options.

    <ion-select [(ngModel)]="itineraryType">
      <ion-option *ngFor="let type of typeOfItineraries">{{type}}</ion-option>

It’s only giving me an empty option list:

typeOfItineraries: [

Hello, I decided to change the way of selection, but although all semuestran selects protects the value that you chose only that everything is marked

Can anybody help me with this? Get 2 selected value and pass to button and display it @brandyshea @FrancoisIonic

We can create a function to stringify object and then parse it when using.

    return JSON.stringify(country);
<ion-select  [(ngModel)]="countryData" >
            <ion-option *ngFor="let country of countries" value="{{stringify(country)}}" {{}}</ion-option>

please note stringfiy is a function that just stringifies whole object using JSON.stringify. It may pose performance issue. But it gets the job done. 

We could, I suppose, but why bother doing this?

this help me thanks:):+1:

<ion-select [(ngModel)]=“age”>
<ion-option *ngFor=“let number of ’ ‘.repeat(100).split(’’);let x = index;” value= {{(x).toString()}} > {{x}}


I think you hit the same bar as i did which is simple and hard at the same time. An html select is NOT a selector :D. Have fun with Ionic :wink:

hai sir , how to passing the ionic option value in next page…plzz help me sir…

You can try like this



I’ve completed yahoo remember me in your prayers

my json data

"data": [
        "6 Years Insurance Plan",
        "10 Years Insurance Plan",
        "20 Years Insurance Plan",
        "Life Time Insurance Plan",
        "Medical Plan"

**html file **

  <ion-item class="cus-select">
						<ion-select (ionChange)="onSelectChange($event)">
						<ion-option *ngFor="let friend of myFriendsArray; let i = index" 
									[value]="{$value: friend.$value}">

in .ts file

//change listner
onSelectChange(selectedValue: Number) {
    this.selectedplan = selectedValue;
    console.log('Selected', selectedValue);
    console.log('Change listner SelectedPlan', this.selectedplan);


//parsing + "plans", postData, requestOptions)
      .subscribe(data => {

        var response = JSON.parse(data['_body']);
        this.allplans =;
        console.log("all plans" + this.allplans);
        for (var i = 0; i < this.allplans.length; i++) {
          this.planobject = { $value: i + 1, fullName: this.allplans[i] };

      }, error => {
        this.showAlertMessage('Server Error please try');
  }`Preformatted text`

Don’t do this. Leading underscores mean “private”. Instead, simply post<TypeOfResponse>() and data will magically become a TypeOfResponse.

You find any solution of options text displays in half??

found a workaround:

        display: none;

My solution to checked one option is the next

<ion-select (ionChange)="selectLenguaje($event)" >
     <ion-option *ngFor="let lenguage of languageList" [selected]="lenguage == profile.language" value="{{lenguage}}">{{lenguage}}</ion-option>