How to change ion-label color while checking ion-radio on Ionic 6?

Issue

I have a following chunk of Ionic code,

<ion-radio-group>
  <ion-item class="ship-method">
    <ion-label>Flat Rate £0.00</ion-label>
    <ion-radio slot="end" value="flat-rate"></ion-radio>
  </ion-item>
  <ion-item class="ship-method">
    <ion-label>Free Shipping</ion-label>
    <ion-radio slot="end" value="free-shipping"></ion-radio>
  </ion-item>
</ion-radio-group>

and following part of SCSS code,

.ship-method {
    margin: 25px;

    ion-label { font-size: 16px; }

    ion-radio {
        --color-checked: #e22078;
    }
}

What I want is to color <ion-label> to #e22078 while checking the respective <ion-radio>. How can I do that?

Solution

First, you need to bind the value of the selected radio button into a variable. So, declare a variable in your .ts file:

selectedShippingMethod:string=''; //Or change it to 'flat-rate' for default value

Next add a 2-way binding in your template file so that you can save the value of the selected radio button.

<ion-radio-group [(ngModel)]="selectedShippingMethod">
  <ion-item class="ship-method">
    <ion-label [class.selected]="selectedShippingMethod=='flat-rate'">Flat Rate £0.00</ion-label>
    <ion-radio slot="end" value="flat-rate"></ion-radio>
  </ion-item>
  <ion-item class="ship-method">
    <ion-label [class.selected]="selectedShippingMethod=='free-shipping'">Free Shipping</ion-label>
    <ion-radio slot="end" value="free-shipping"></ion-radio>
  </ion-item>
</ion-radio-group>

Add a class named selected in .SCSS file:

.selected{

   color:#e22078;
}

Here you are assigning ion-label class 'selected' when the value of selectedShippingMethod matches the value of that radio-button

<ion-label [class.selected]="selectedShippingMethod=='free-shipping'">

Answered By - Pankaj Sati