Getting the selected switch value, on (ionChange) in the radio group, ionic2

Question

I want to get the selected switch value in the event (ionChange) in the radio group in Ionic2.

My HTML code

<ion-list radio-group *ngFor="let question of mcqData; let i= index;" (ionChange)="mcqAnswer(i)"> <ion-list-header> {{question.questionText}} </ion-list-header> <ion-item> <ion-label>{{question.optionA}}</ion-label> <ion-radio value="1"></ion-radio> </ion-item> <ion-item> <ion-label>{{question.optionB}}</ion-label> <ion-radio value="2"></ion-radio> </ion-item> <ion-item> <ion-label>{{question.optionC}}</ion-label> <ion-radio value="3"></ion-radio> </ion-item> <ion-item> <ion-label>{{question.optionD}}</ion-label> <ion-radio value="4"></ion-radio> </ion-item> </ion-list> 

How can I get the value of ionic radio in mcqQuesiton () on (ionic change).

I have a number or radio groups on one page, since this is a page with a multiple choice question.

Answer 1

You can use the ionSelect event <ion-radio> to pass a value.

 ... <ion-item> <ion-label>{{question.optionA}}</ion-label> <ion-radio value="1" (ionSelect)="mcqAnswer(i,1)"></ion-radio> </ion-item> <ion-item> <ion-label>{{question.optionB}}</ion-label> <ion-radio value="2" (ionSelect)="mcqAnswer(i,2)"></ion-radio> </ion-item> ... 

Your typescript (.ts) file will have something like

 mcqAnswer(questionID,answer){ ... } 

Answer 2

You can pass the event $ event to your onChange method. For instance.

In your html:

 <ion-list radio-group *ngFor="let question of mcqData; let i= index;" (ionChange)="mcqAnswer($event)"> <ion-list-header> {{question.questionText}} </ion-list-header> <ion-item> <ion-label>{{question.optionA}}</ion-label> <ion-radio value="1"></ion-radio> </ion-item> <ion-item> <ion-label>{{question.optionB}}</ion-label> <ion-radio value="2"></ion-radio> </ion-item> <ion-item> <ion-label>{{question.optionC}}</ion-label> <ion-radio value="3"></ion-radio> </ion-item> <ion-item> <ion-label>{{question.optionD}}</ion-label> <ion-radio value="4"></ion-radio> </ion-item> </ion-list> 

In Typescript:

 function mcqAnswer(value) { console.log(value); } 

Answer 3

Use (modify) event

 <ion-list radio-group [(ngModel)]="pet" (change)="petChange($event)"> <ion-item> <ion-radio checked (select)="dogSelect($event)"></ion-radio> <ion-label>Dogs</ion-label>