how to use event onChange in ionic2

Question

Basically I am trying to make a registration form in which I have some drop down lists. And I want to apply "(change)" event on it which will trigger a function whenever value will be changed or we can say value be selected from that drop down list and based on that I will be assigning next fields dynamically but this event is not working on drop-down while its working fine with text fields. Can someone help me out with this?

Sample code:

home.html -->

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>

<form [formGroup]="myForm">   
    <ion-item>
        <ion-label>Dropdown1 :</ion-label>
        <ion-select formControlName="dd" (ionChange)='f()'  #dd>
         <ion-option value='1'>A</ion-option>
            <ion-option value='2'>B</ion-option>
            <ion-option value='3'>C</ion-option>
            <ion-option value='4'>D</ion-option>
        </ion-select>
    </ion-item>

     <ion-item>
    <ion-label>Dropdown2 :</ion-label>
    <ion-select>
     <ion-option value='1'>E</ion-option>
        <ion-option value='2'>F</ion-option>
        <ion-option value='3'>G</ion-option>
        <ion-option value='4'>H</ion-option>
    </ion-select>
</ion-item>

</form> 
</ion-content>

home.ts -->

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  function f(){
  alert('Value Changed!');
  alert(this.myForm.dd);

  }

}

Answer 1

You can use ngModel

<ion-select ngModel (ngModelChange)='f()' name="xxx">

I'm not sure if the ngModel part is needed to get ngModel applied at all. You can try to remove it and see if it's still working.

Three also seems to be an ionChange event

<ion-select (ionChange)='f()' name="xxx">

http://ionicframework.com/docs/v2/api/components/select/Select/

Answer 2

You can use ionSelect on ion-option this will fire each time the item is selected.

Ionic docs ion-option

<ion-select>
    <ion-option (ionSelect)="optionSelected($event)" *ngFor="let item of items$ | async" [value]="item.id">{{item.name}}</ion-option>
</ion-select>