Problem Detecting Radio Button Change Event in Ionic


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-label>Imperial (lbs)</ion-label>
      <ion-radio value="lbs"></ion-radio>
      <ion-label>Metric (kg)</ion-label>
      <ion-radio value="kg"></ion-radio>

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.


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

setTimeout(() => {
this.myApp.sCabSort = this.sortByForm.value.sortBy;
}, 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.


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

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


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.