How to use radio-group list, inside main ion-list?

Ionic Framework ionic-v3
1

TLDR:
How can I have an ion-list inside an ion-list?
or
Is it possible to use radio-group directives without using a list?

My Dilema:
I have a somewhat complex list, that essentially presents a questionnaire to the user. One of the question types is answered on a rating scale, so radio-group/radio-buttons are most appropriate. I wished for the radio buttons to be displayed horizontally, so I adapted the css to facilitate this. I have made a <10sec video illustrating how it operates:

To allow this functionality, rather than using ion-list, I used ion-item-group which allowed me to use the to wrap my radio buttons in.
However, if a standard ion-list is used to wrap the content, the nested ion-list does not render/is not generated.

I wish however, to add the ion-sliding-item functionality to each question element. This requires that the list be wrapped in the standard ion-list element, which breaks the functionality of the internal radio buttons! As shown here:

So, I’m kind of stuck with what I’ve got for now. If you happen to know any solutions or workarounds, I’d be very grateful!

Thanks!

2

So one thing is the radio-group attribute doesn’t have to be on an ion-list it can be on a div or anything you’d like. It doesn’t look like you’re using any of the styling from the ion-list for the radio group so this may be better in your case.

I haven’t tested this (on a phone) so if this doesn’t work let me know and I can look into a better solution. We have an open issue for nested lists, but there isn’t a simple solution at the moment.

3

Hi @brandyshea thanks for getting back to me…again! I tried what you suggested, and you are correct, the radio-group works with a div element, thanks for showing me that.

But I’ve realised that the issue may be to do with an ion-item inside an another ion-item, and so it still does not render.

As it seems an ion-item-sliding requires and ion-item element followed by an ion-item-options.
Whilst this is fine, and works well, the radio-group also requires an ion-item with ion-label/ion-radio value.

e.g.

<ion-item-sliding class="question" #slidingItem *ngFor="let question of domain.questions">
  <ion-item>
    
    <... various layout / ngIf / ngSwitch ...>

    <ion-item class="rate-option" *ngFor="let i of range(question.range_lower, question.range_upper)">
      <ion-label>{{i}}</ion-label>
      <ion-radio value="{{i}}"></ion-radio>
    </ion-item>

  </ion-item>

  <ion-item-options class="schedule-options">
    <button class="info-button" favorite (click)="doAlert(slidingItem, question)">
      <ion-icon name="information-circle"></ion-icon>
    </button>
  </ion-item-options>
</ion-item-sliding>

This nesting is seemingly breaking it. Any suggestions? One workaround I can see is that I can re-write all my Angular switch/if logic, outside of the ion-item, and use it that way, but it will mean duplicating a lot of template code.