Follow the docs.. if you are building on ionic, you should use ionic 4 components as much as possible.. They already have everything in the docs ion-radio-group & ion-radio.

Here is the questionlist, which I get from API. I want to show the option in radio button select in Ionic 4. When I use *ngFor=“let key of ques; let i = index”, It shows the question number as {{i+1}}) {{key.question}}.I want to show the selected radio button value from option1, option2, option3, option4, option5 as answer1 for question1, answer2 for question2 Like this. How to solve this?

I have a situation to select one radio button from dynamically created radio buttons. I know it is possible with Radio group but still I am not able to do it because my situation is little different.

All data coming from the server in json form. I have created the view dynamically with one question and four options with radio buttons. But what i am understanding is every row is new row and I am not able to select only one radio buttons from all radio buttons. Every button is selecting individually but I want to select only one radio button on which I click.
Any help would be appreciated.

HTML

<ion-row style="padding:5px;" *ngFor="let key of ques; let i = index">
<ion-text>{{i+1}}) {{key.question}}</ion-text>
<ion-radio-group>
    <ion-item lines=none *ngIf="key.option1!==null">
     <input slot="start" type="radio" value="{{key.option1}}" [(ngModel)]="option1" required>&nbsp;&nbsp; 
      <ion-text style="font-size:12px; font: JosefinSans-Regular; color:black;">{{key.option1}}</ion-text>
    </ion-item>

    <ion-item lines=none *ngIf="key.option2!==null">
     <input slot="start" type="radio" value="{{key.option2}}" [(ngModel)]="option2" required>&nbsp;&nbsp; 
      <ion-text style="font-size:12px; font: JosefinSans-Regular; color:black;">{{key.option2}}</ion-text>
    </ion-item>

    <ion-item lines=none *ngIf="key.option3!==null">
      <input slot="start" type="radio" value="{{key.option3}}" [(ngModel)]="option3" required>&nbsp;&nbsp; 
      <ion-text style="font-size:12px; font: JosefinSans-Regular; color:black; margin-left:2px;">{{key.option3}}</ion-text>
    </ion-item>

    <ion-item lines=none *ngIf="key.option4!==null">
      <input slot="start" type="radio" value="{{key.option4}}" [(ngModel)]="option4" required>&nbsp;&nbsp; 
      <ion-text style="font-size:12px; font: JosefinSans-Regular; color:black; margin-left:2px;">{{key.option4}}</ion-text>
    </ion-item>

    <ion-item lines=none *ngIf="key.option5!==null">
      <input slot="start" type="radio" value="{{key.option5}}" [(ngModel)]="option5" required>&nbsp;&nbsp; 
      <ion-text style="font-size:12px; font: JosefinSans-Regular; color:black; margin-left:2px;">{{key.option5}}</ion-text>
    </ion-item>
</ion-radio-group>

ques

{"questionlist":[
    {"question":"Please note that information...?",
    "option1":"option1",
    "option2":"option2",
    "option3":"option3",
    "option4":"option4",
    "option5":null},
    {"question":"Have you ever had any of the following:",
    "option1":"Diabetes",
    "option2":"Hypertension",
    "option3":"Lung disease",
    "option4":"Heart Disease",
    "option5":"None of the Above"}
]
}