Ionic: Set default checked of ion-radio by variable

Issue

Current Versions: Ionic 6.7.0

Hello, this is my first question on stackoverflow, so please be forgiving if some information are missing.

I try to include a radio-group that should be equal to a variable of my .ts-file. I pass an 'id' between two pages, so the user doesn't always have to re-select it.

Thats what I tried, but I can't get a default selected radio-button working.

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; 
            } 
        } 
    }

Any solutions or hints?

Edit 1: I ran it on my device as well and comparing to the ionic serve instance the default radio selection is shown correctly. However, when i changed the value on another page and return to the home.page, no radio-button is selected (but the value is correct). When I set another value by e.g. an <ion-input [(ngModel)]="car_id">, a radio-button gets selected correctly according to the input-value.

Solution

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

Answered By - WirtsHaus