Angular2/Ionic2 - Toggle content after a radio button is checked

Question

I have 3 radio button, in which I want to show a particular content once of them is checked, currently here is my code that show present the 3 radio buttons:

 <ion-list radio-group>
    <ion-item class="listItems">
        <ion-label>Option 1</ion-label>
        <ion-radio checked="false" value="Option1"></ion-radio>
    </ion-item>

    <ion-item class="listItems">
        <ion-label>Option 2</ion-label>
        <ion-radio checked="false" value="Option2"></ion-radio>
    </ion-item>

    <ion-item class="listItems">
        <ion-label>Option 3</ion-label>
        <ion-radio checked="false" value="Option3"></ion-radio>
    </ion-item>
    </ion-list>

I've found a codepen written in Angular1 that shows/hides content when a radio button is check, I've tried to play with it to make it work in my ionic2/angular2 project; however, it didn't worked!

I've also found a thread in StackOverflow for Toggle content after a radio button is checked using jQuery but I was not lucky enough to make it work in my project!

Can you please provide some solutions?

Answer 1

This works based on your code. You need [(ngModel)] in the ion-list tag.

<ion-list radio-group [(ngModel)]="content" >
    <ion-item class="listItems">
        <ion-label>Option 1</ion-label>
        <ion-radio checked="false" value="Option1"></ion-radio>
    </ion-item>

    <ion-item class="listItems">
        <ion-label>Option 2</ion-label>
        <ion-radio checked="false" value="Option2"></ion-radio>
    </ion-item>

    <ion-item class="listItems">
        <ion-label>Option 3</ion-label>
        <ion-radio checked="false" value="Option3"></ion-radio>
    </ion-item>
    </ion-list>
    <h *ngIf="content=='Option1'"> Option 1</h>
    <h *ngIf="content=='Option2'"> Option 2</h>
    <h *ngIf="content=='Option3'"> Option 3</h>