radio-buttonionic5

How to check a radio button on Angular for Ionic 5?

i'm getting the following error:

core.js:7812 Can't bind to 'checked' since it isn't a known property of 'ion-radio'.

And my code on HTML is:

    <ion-list>
      <ion-radio-group value="default" (ionChange)="radioGroupChange($event)">
        <ion-list-header>
          <ion-label>Image language</ion-label>
        </ion-list-header>
    
        <ion-item>
          <ion-label>SPA</ion-label>
          <ion-radio [checked]="true" slot="start" value="spa"></ion-radio>
        </ion-item>
    
        <ion-item>
          <ion-label>RU</ion-label>
          <ion-radio slot="start" value="ru"></ion-radio>
        </ion-item>
    
        <ion-item>
          <ion-label>ENG</ion-label>
          <ion-radio slot="start" value="eng"></ion-radio>
        </ion-item>
      </ion-radio-group>

    </ion-list>

How to set by default a radio button checked?

Solution

  • Well according to the Ionic5 docs, you have to set the value of the <ion-radio-group> to the value of the <ion-radio> that you want checked by default.

    So get rid of your [checked]="true"

    Change

    <ion-radio-group value="default" (ionChange)="radioGroupChange($event)">

    to

    <ion-radio-group value="spa" (ionChange)="radioGroupChange($event)">

    to achieve your desired outcome.