Nested Radio Group

Ionic Framework
1

Hi All,

I’m trying to build nested radio groups. When I select a radio button in a group, a new radio group appears below the selected option. But unfortunately, as soon as I select an option from the new radio group, the parent radio button is getting deselected.

Is there any way to accomplish this. Please help!

2

Ionic forum expects you to try to solve your own problem first, as your attempts help us to better understand what you want. Please edit the question to show what you’ve tried, so as to illustrate a specific roadblock you’re running into in a minimal reproducible example.

3

Thanks for your reply.
I ended up creating two separate radio groups and handle the state using ionChange event.

@ViewChild(‘radioGroup1’) radioGroup1: IonRadioGroup;
@ViewChild(‘radioGroup2’) radioGroup2: IonRadioGroup;

public selectedGroup: any;
constructor() {
}

ngOnInit() {
}

changeEvent1(event) {
this.selectedGroup = event.detail.value;
this.radioGroup2.value = event.detail.value;
}

changeEvent2(event) {
this.selectedGroup = event.detail.value;
this.radioGroup1.value = event.detail.value;
}