How to pass radio button value to another page

<ion-radio-group (ionChange)="radioChangeHandler($event)">


    <ion-label color="">





    <ion-label color="medium">Plain</ion-label>

    <ion-radio value="plain"></ion-radio>



    <ion-label color="success">Lemon&Herb</ion-label>

    <ion-radio value="Lemon&Herb"></ion-radio>



    <ion-label color="warning">Mild</ion-label>

    <ion-radio value="Hild"></ion-radio>



    <ion-label color="danger">Hot</ion-label>

    <ion-radio value="Hot"></ion-radio>



// .ts file

flavor: string;

radioChangeHandler(event: any){

this.flavor =;



So you generally need to know how to pass data to another Page?
I use the Angular State for this, so have a look at this:

I’m not saying that there’s anything wrong with @EinfachHans’s suggestion, but when I last looked at the Angular router state feature, I came away with the impression that it was best suited for spies within the navigation system itself, as opposed to pages, because the guarantees surrounding when it was reliable were relatively weak.

So what I do in cases like this is to use mutually-injected services that provide roughly the same functionality, but with semantics that are totally under the app code control.

Do you have a link i can refer to or show me an example. I’m new to ionic and still learning it

Tour of Heroes part 4.

i used service and this is how i want it displayed
I to add whichever radio button i choose to be added to cart but it can’t get the radio button id. And the only way i know how to get an id is this way






  <ion-label class="ion-text-right">{{entry.price | currency:'R'}}</ion-label>

  <ion-checkbox slot="start" [(ngModel)]="entry.isChecked"></ion-checkbox>

  <ion-button expand="full" (click)="addExtra(entry)" >Add to Cart</ion-button>
But look how it displays ![2020-03-25 (2)|338x402](upload://qrKwA5aDgCfKFZ8uxNVAw0zh4EH.png)