Ionic 2: why change event is not working on ion-select?

Question

Why change event is not working on ion-select?

I tried with following statement:

<ion-select formControlName="shippingMethod (change)="shippingMethodChange($event)">

I also tried with ionChange by using following and This is working:

<ion-select formControlName="shippingMethod (ionChange)="shippingMethodChange($event)">

It is being said "We can use Angular event bindings to respond to any DOM event" and here is the doc for the change event

https://developer.mozilla.org/en-US/docs/Web/Events/change

Answer 1

You can use it the following way:

  <ion-select [(ngModel)]="gender" (ionChange)="onSelectChange($event)">
    <ion-option value="G">Colombo</ion-option>
    <ion-option value="M">Galle</ion-option>
  </ion-select>

then in your .ts file:

  onSelectChange(selectedValue: any) {
    console.log('Selected', selectedValue);
  }

Answer 2

ion-select is a custom component by Ionic 2 . Check api here. It is built by ionic leveraging an alertController/actionsheetcontroller based on developer requirement.

It does not use change event like an HTML select and the correct event emitted is ionChange.

Edit And the Event emitted for clicking on ion-option is ionSelect.

Check this github issue.

Component docs here

Hope this answers your question.

Answer 3

The question keeps popping up every now and then. According to the documentation ionSelect is an output event on option (ion-option)

Here is an example usage

<ion-select>
  <ion-option *ngFor="let opt of options" [value] = "opt" (ionSelect)="triggerMe(opt)">{{opt}}</ion-option>
</ion-select>

And then

triggerMe(value: string): void {
  console.log("selected value", value);
}