I have below code which is working so far, but have small problem which I cannot figure it out. It's not updating (set the selected value into ion-select) ion-select after user chooses one option? Basically UI is not updating with selected value?

<ion-item>
<ion-label>Classifications</ion-label>
<ion-select [(ngModel)]="selectedItem" #item (change)="onChange(selectedItem)">
<ion-option *ngFor="#item of items" [value]="item">{{item}}</ion-option>
</ion-select>
</ion-item>

onChange(selectedItem) {
   console.log('Selected item: '+selectedItem);
}

Out put properly displays as user select, any ideas what I'm missing here?

update

<ion-item> 
  <ion-label>Gender</ion-label> 
  <ion-select [(ngModel)]="gender"> 
    <ion-option value="f" checked="true">Female</ion-option> 
    <ion-option value="m">Male</ion-option> 
  </ion-select> 
</ion-item>

I have below code which is working so far, but have small problem which I cannot figure it out. It's not updating (set the selected value into ion-select) ion-select after user chooses one option? Basically UI is not updating with selected value?

<ion-item>
<ion-label>Classifications</ion-label>
<ion-select [(ngModel)]="selectedItem" #item (change)="onChange(selectedItem)">
<ion-option *ngFor="#item of items" [value]="item">{{item}}</ion-option>
</ion-select>
</ion-item>

onChange(selectedItem) {
   console.log('Selected item: '+selectedItem);
}

Out put properly displays as user select, any ideas what I'm missing here?

update

<ion-item> 
  <ion-label>Gender</ion-label> 
  <ion-select [(ngModel)]="gender"> 
    <ion-option value="f" checked="true">Female</ion-option> 
    <ion-option value="m">Male</ion-option> 
  </ion-select> 
</ion-item>

• javascript
• typescript
• angular
• ionic2

• Is onChange(selectedItem) being called? selectedItem should already be updated by <ion-select [(ngModel)]="selectedItem". (change)="onChange(selectedItem) shouldn't be necessary. – Günter Zöchbauer Commented Feb 28, 2016 at 16:40
• yes, onChange(selectedItem) is called, but if I removed that line how do I get selected value, thus console.log('Selected item: '+selectedItem); in constructor gives this ReferenceError: selectedItem is not defined. – happycoder Commented Feb 28, 2016 at 16:46
• To get rid of the error you'd need to change (change)="onChange(selectedItem)"> to (change)="onChange($event)"> or (change)="onChange(item.value)"> (I don't know what the property names of <ion-item> actually are or what value it provides for the event. – Günter Zöchbauer Commented Feb 28, 2016 at 16:49
• You could also try if changing the event (ngModelChange)="onChange($event)"> also calls onChange(). – Günter Zöchbauer Commented Feb 28, 2016 at 16:50
• It didnt work. This simple example of select, which already selected female by default.<ion-item> <ion-label>Gender</ion-label> <ion-select [(ngModel)]="gender"> <ion-option value="f" checked="true">Female</ion-option> <ion-option value="m">Male</ion-option> </ion-select> </ion-item> – happycoder Commented Feb 28, 2016 at 17:07

2 Answers 2

For Ionic 2 beta 10 next works for me:

<ion-item>
    <ion-label>Fest</ion-label>
    <ion-select [(ngModel)]="festId" (ionChange)="festSelected($event, festId)">
        <ion-option *ngFor="let fest of festList" value="{{fest.id}}">
            {{fest.title}}
        </ion-option>
    </ion-select>
</ion-item>

I was having the same issues after adding (ionChange)="" it started working for me.

<ion-select [(ngModel)]="msgType" (ionChange)="getListOfMsg()">