Ionic 2: How to call a method when select value is changed

Question

I am new to Ionic 2, I read the Ionic 2 Documentation over and thought this code would work. Its supposed to give back the current select value when it's changed and print it to console.

page.html

<ion-select #C ionChange="onChange(C.value)"> 
                    <ion-option value="a">A</ion-option>
                    <ion-option value="b">B</ion-option>
</ion-select>

page.ts

public CValue:String;
onChange(CValue) {
     console.log(CValue);
}

However the console isn't giving out anything related to this. Did I miss something in the binding?

score 40 · Accepted Answer · answered Nov 16 '16 at 10:27

40

Instead of

<ion-select #C ionChange="onChange(C.value)"> 
  ...
</ion-select>

Since ionChange is an event (and not a simple attribute) you need to do it like this:

<ion-select #C (ionChange)="onChange(C.value)">
  ...
</ion-select>

answered Nov 16 '16 at 10:27

sebaferreras

44,206
11
116
134

8

Thanks, you know its 3AM when you start missing stuff like this. – CMA Nov 16 '16 at 10:31

score 3 · Answer 2 · edited Oct 12 '18 at 07:35

3

Instead of doing it this way

<ion-select #C (ionChange)="onChange(C.value)">
  ...
</ion-select>

you can also pass "$event" to get the value

<ion-select #C (ionChange)="onChange($event)">
  ...
</ion-select>

edited Oct 12 '18 at 07:35

Pang

9,564
146
81
122

answered Oct 12 '18 at 07:34

vijay mishra

31
4

score 0 · Answer 3 · answered Mar 08 '19 at 17:14

0

For Ionic 4 use

<ion-select [(ngModel)]="c.value" (ngModelChange)="myFun(c.value)">
...
</ion-select>

answered Mar 08 '19 at 17:14

Anuj TBE

9,198
27
136
285

Grant · Answer 4 · 2019-03-29T02:30:25.077

Use ionChange in Ionic 4 as per docs

<ion-select formControlName="item" (ionChange)="saveSettings()"><ion-select>

Make sure you include the emitEvent: false property into the options of patching to stop an initial population of data from triggering the ionChange event.

this.settingsForm.patchValue(data, {emitEvent: false, onlySelf: true})

As of writing this EDIT - ion-select is the only element it seems that fires upon patching the options, so you can end up with a double up of saving at initialisation. Stop this by setting a boolean globally that your save function looks for to denote whether or not initialisation has completed. Remember, you can help Ionic along where you need to! Frameworks are just there to help, not do it all! :D Ie:

await this.settings$.subscribe(async data => {
  if(this.initialLoading == 0) {
    console.log('Subscription data initialising...');
    await this.settingsForm.patchValue(data, {
      onlySelf:true,
      emitEvent:false
    });
    this.initialLoading = 1;
  } else {
    console.log('Settings were altered.');
  }
});

async saveSettings() {
  if(this.initialLoading == 1) {
    // your code
  }
}

Isaac Quarshie · Answer 5 · 2021-03-31T22:14:06.057

0

In your template

<ion-label>Priority</ion-label>
   <ion-select placeholder="Select"  [(ngModel)]="pvalue" (ionChange)="getValue()">
    <ion-option value="a">A</ion-option>
    <ion-option value="b">B</ion-option>
 </ion-select>

In your Component.ts File

pvalue:any;
getValue(){
console.log(this.pvalue);
// the value will be displayed
}

edited Mar 31 '21 at 22:14

answered Mar 30 '21 at 20:42

Isaac Quarshie

67
5

Please add necessary information with the code to better understand it. Please read https://stackoverflow.com/help/how-to-answer – Muhammad Tariq Mar 31 '21 at 05:41
Thank you for the notifying me, I have updated it – Isaac Quarshie Mar 31 '21 at 22:14

Ionic 2: How to call a method when select value is changed

5 Answers5