<ion-radio> is not checked after router.navigate

Hello,

I am using Ionic v.6.7.0 and tried to create a two page android application. When I connect a variable (“car_id”) by ngModel to my radio-group, navigate to another page, change the variable and return to the first page, no radio-button is selected. The variable is changed correctly (proofed by printing it out). If I reset the variable by e.g. , the correct radio-button becomes selected.

home.page.html

  <ion-radio-group (ionChange)="carChangeEvent($event)"  [(ngModel)]="car_id">

                        <ion-item>
                            <ion-label>Button 1</ion-label>
                            <ion-radio slot="start" value="1"></ion-radio>
                        </ion-item>

                        <ion-item>
                            <ion-label>Button 2</ion-label>
                            <ion-radio slot="start" value="2"></ion-radio>
                        </ion-item>

                        <ion-item>
                            <ion-label>Button 3</ion-label>
                            <ion-radio slot="start" value="3"></ion-radio>
                        </ion-item>

     </ion-radio-group>

home.page.ts

export class HomePage {

    public car_id: string = "1";
    ...




    constructor(...) {...}


    carChangeEvent (event) {
        switch(this.car_id) { 
            case "1": { 
                ...do stuff by car_id...
            break; 
            } 
            case "2": {  
                ...do stuff by car_id...
            break; 
            }
            case "3": { 
                ...do stuff by car_id...
            break; 
            } 
            default: { 
                this.msg2 = "switch default";
                console.log('ERROR: Invalid car identifier: ' + event.target.value);
            break; 
            } 
        } 
    }

Is it a bug of ion-radio/ion-radio-group or am I doing a mistake?

I see that the variable is scoped at the page level. While not a guru, I would imagine that you will probably want to use a service to set and get the variable so that it’s value persists between page navigation.

I finaly got it.
I defined a wrong data-type in the queryParams : 'NavigationExtras', so the switch/case was not able to enter the correct case. So everything is fine and working correctly.

I pass it as queryParam with the navigation. For this application thats enough. Problem was a data-type mistake.

Glad to see that you figured it out.

I may just be paranoid, but would suggest that you read this post and the links therein. Executive summary as it applies here: you are courting danger by relying on the order of execution: there isn’t a reliable way to know in which order your two (ngModelChange) listeners fire, so you cannot safely rely on the value of this.car_id inside carChangeEvent: if you absolutely insist on writing code with multiple (ngModelChange) listeners, ensure that your code works independently of which one fires first (such as using event instead of this.car_id in carChangeEvent).