By user3260583


2018-12-06 12:57:51 8 Comments

I'm new to Ionic. I'm really stuck in one issue for past 2 days. I've two pages application. Say HomePage and SettingsPage.

In SettingsPage, I've got a radio group with 4 radio buttons. Once is selected by default. When I'm clicking on another radio, that is being selected, however, once I leave that page, say I go to HomePage, and come back again, I find the default value to be selected and not the one I actually selected.

How can I make my selected value persistent even if I leave the SettingsPage?

Below is the code:

  <ion-list radio-group (ionChange)="radiochanged($event)">
        <ion-item item-left>
          <ion-label>5 Seconds</ion-label>
          <ion-radio value="5000" (ionChange) = "radiofivechanged()"
          [checked]="check5"  ></ion-radio>
        </ion-item>
        <ion-item item-left>
            <ion-label>8 Seconds</ion-label>
            <ion-radio value="8000" [checked] = "check8" ></ion-radio>
          </ion-item>
          <ion-item item-left>
              <ion-label>12 Seconds</ion-label>
              <ion-radio value="12000" [checked]="check12" ></ion-radio>
            </ion-item>
            <ion-item item-left>
                <ion-label>15 Seconds</ion-label>
                <ion-radio value="15000" [checked]="check15" ></ion-radio>
              </ion-item>
      </ion-list>

settingspage.ts

check5, check8, check12, check15 : boolean;
  radiofivechanged(){

      this.check5 = true;

     this.check8 = false;
     this.check12 = false;
     this.check15 = false;
  }

1 comments

@Ira W 2018-12-06 14:17:45

To keep persistent data from page to page and when you close the app you'll have to write to the information somewhere in the phones file system. There's a few ways of doing it, Id recommend using file from ionic-native https://ionicframework.com/docs/native/file/

So to same the information after you close settings would look something like: YouPageName.onDidDismiss(()=>{ this.FileProvider.writeToFile(filename, data);} // <- make a provider for file implantation

if you just want it for page to page a provider will do (ionic 3) service (ionic4)

@user3260583 2018-12-06 15:09:52

Thank for replying. I've was searching for the answers and found this can be achieved using Services. We need to somehow get the value of Checked Property (true or false) and save it in Service. Can you help me how to get the Checked Property and save it in a variable so that we can pass it to Service?

@Ira W 2018-12-06 15:21:59

Yeah sure, im pretty sure you want a provider because you only want one instance of it so to create a provider is pretty simple 'ionic g provider nameOfProvider' in the CLI ionicframework.com/docs/cli/generate

@Ira W 2018-12-06 15:24:35

Then import your provider in settings page.ts 'import { Push } from '../../providers/nameOfProvider';' then add it to constructor, any problems just ask

@Ira W 2018-12-06 15:34:58

<ion-checkbox [(ngModel)]="nameOfProvider.check5"></ion-checkbox> is how you could pass the info from the html to the provider

Related Questions

Sponsored Content

22 Answered Questions

[SOLVED] jQuery get value of selected radio button

32 Answered Questions

17 Answered Questions

[SOLVED] How to uncheck a radio button?

27 Answered Questions

[SOLVED] How to check a radio button with jQuery?

5 Answered Questions

[SOLVED] How to select a radio button by default?

  • 2011-04-08 08:18:04
  • jslearner
  • 1180651 View
  • 586 Score
  • 5 Answer
  • Tags:   html radio-button

2 Answered Questions

[SOLVED] Check default ion-radio using ngIf

1 Answered Questions

2 Answered Questions

[SOLVED] ExtJS radio group - how to set value based on user confirmation?

1 Answered Questions

VB .NET Radio Button Checked Property Not Showing As True Properly

2 Answered Questions

[SOLVED] ionic radio button validation

Sponsored Content