How to select an option or radio button by default

Ionic Framework ionic-v3
1

I’m using the following code for ion-select options

<ion-select [(ngModel)]="sortorder" (ionChange)="sortSelected($event, sortorder)" placeholder="Popular">
   <ion-option value="Popular" checked="true">Popular</ion-option>
   <ion-option value="Distance">Distance</ion-option>
   <ion-option value="Difficulty">Difficulty</ion-option>
</ion-select>

and the following for ion-radio

    <ion-col text-center >
      <ion-radio value="Beginner"></ion-radio>
      <ion-label>Beginner</ion-label> 
    </ion-col>

    <ion-col text-center>
       <ion-radio value="Intermediate"></ion-radio>
      <ion-label>Intermediate</ion-label>
    </ion-col>

    <ion-col text-center>
      <ion-radio value="Expert"></ion-radio>
      <ion-label>Expert</ion-label> 
    </ion-col>

    <ion-col text-center >
      <ion-radio checked="true" value="Not interested"></ion-radio>
      <ion-label>Not interested</ion-label> 
    </ion-col>

Both items that I want to be displayed as selected by default are marked as checked=“true”.
However, no option or radio button shows up as selected on the screen.

How do I go about this?

I’ve also tried: [checked], checked , selected=“true”, [selected] . Nothing works.

Would really appreciate thoughts on this one.

2

Set the bound sortorder property to whatever you want the default to be.

3

Sorry, I didn’t follow that. I’m new to this. Could you please elaborate?

4

Sorry, I didn’t realize you had two different components. Presumably your radio group has some other enclosing element with an [(ngModel)] binding. Whatever that property is, set it to whatever value you want to be selected in the radio group. There can only be one selected option in a radio group; that’s part of the point of radio groups. If it still doesn’t make sense, look at this example.