How to uncheck ion-radio in Angular for Ionic 5

Question

I can't find a way to uncheck ion-radio, I tried using the "checked" property like in many examples online, but it seems that it works only for Ionic 4, in Ionic 5 this property is not there anymore

       <ion-radio-group >
               <ion-row>
                <ion-col class="radioCol">
                  <ion-radio   value="1"></ion-radio>
                </ion-col>
                <ion-col class="radioCol">
                  <ion-radio  value="2"></ion-radio>
                </ion-col>
                <ion-col class="radioCol">
                  <ion-radio  value="3"></ion-radio>
                </ion-col>
                <ion-col class="radioCol">
                  <ion-radio  value="4"></ion-radio>
                </ion-col>
                <ion-col class="radioCol">
                  <ion-radio  value="5"></ion-radio>
                </ion-col>
                <ion-col class="radioCol">
                  <ion-radio  value="6"></ion-radio>
                </ion-col>        
        </ion-radio-group>

how to uncheck a radio on a Button click?

Answer 1

ion-radio-group has an allowEmptySelection property that you can set to true to allow a second click on a radio in that group to clear that selection: https://ionicframework.com/docs/v5/api/radio-group#allowemptyselection

<ion-radio-group [value]="radioVal" [allowEmptySelection]="true">
  <ion-row>
    <ion-col class="radioCol">
      <ion-radio value="1"></ion-radio>
    </ion-col>
    <ion-col class="radioCol">
      <ion-radio value="2"></ion-radio>
    </ion-col>
  </ion-row>      
</ion-radio-group>

Answer 2

I think it can be implemented easily.

<ion-radio-group [value]="radioVal">
  <ion-row>
    <ion-col class="radioCol">
      <ion-radio   value="1"></ion-radio>
    </ion-col>
    <ion-col class="radioCol">
      <ion-radio  value="2"></ion-radio>
    </ion-col>
    <ion-col class="radioCol">
      <ion-radio  value="3"></ion-radio>
    </ion-col>
    <ion-col class="radioCol">
      <ion-radio  value="4"></ion-radio>
    </ion-col>
    <ion-col class="radioCol">
      <ion-radio  value="5"></ion-radio>
    </ion-col>
    <ion-col class="radioCol">
      <ion-radio  value="6"></ion-radio>
    </ion-col>
  <ion-row>      
</ion-radio-group>
<ion-button type="primary" (click)="radioVal = ''">
  refresh
</ion-button>

Of course, in the component, you have to define the radioVal.

radioVal = "";