Problem Detecting Radio Button Change Event in Ionic

Ionic Framework ionic-v3
1

What is the proper way to detect a change on a radio button in Ionic 2? The template looks like this:

  <ion-list radio-group (change)="saveSettings();" [(ngModel)]="units">
    
    <ion-item>
      <ion-label>Imperial (lbs)</ion-label>
      <ion-radio value="lbs"></ion-radio>
    </ion-item>
    
    <ion-item>
      <ion-label>Metric (kg)</ion-label>
      <ion-radio value="kg"></ion-radio>
    </ion-item>
    
  </ion-list>

The issue is the change event is emitted before the units variable is updated, which causes the previous value to be re-saved in the database, not the new radio selection.

3 Likes
2

I’m having the same problem. Its a hack, but putting a set timeout on your click event seems to work:

buttonChange(){
setTimeout(() => {
this.myApp.sCabSort = this.sortByForm.value.sortBy;
console.log(this.myApp.sCabSort);
}, 250);

}

This seems to give it enough time to store the value accurately. I’ve only tried this on browser, not sure if it would change on a device.

Definitely hoping I find a better solution.

3

Not sure if you’ve solved this but you can update to this -

<ion-list radio-group (ionChange)="saveSettings();" [(ngModel)]="units">
2 Likes
4

Did anyone resolved?
I’m getting yet the previous state of the radio group. It’s useless.
[Edit] Sorry, the solution by Charlie001 works!. My problem is different.