ionic3: How to connect values of radio button to connect to a page

Question

Ionic 3...App contains news page and settings page.
The Settings Page has to change the following settings of the app using radio buttons : • The news source the app reads the news from. changes made on this page should be stored when the Save button is pressed. When the Settings Page is open again these changes should be reflected.

i am unable to link radio buttons to particular news source

Answer 1

If you are not working with some kind of backend you could use Ionic LocalStorage. You need to install the Storage plugin for this to work. To do so follow this link .

In settings.ts you should have something like this.

import { Storage } from '@ionic/storage';

firstOption: String;

export class Settings {
  constructor(private storage: Storage) { }

  ionViewWillEnter() { 
    this.setUpSettings();
  }

  optionSelected(option,value) {
    this.storage.set(option,value);
  }

  setUpSettings() {
    this.storage.get('firstOption').then((res) => {
      this.firstOption = res;
    });
  }
}

Then in settings.html

<ion-content>

  <ion-list radio-group [(ngModel)]="firstOption">

    <ion-item>
      <ion-label>BBC</ion-label>
      <ion-radio (ionSelect)="optionSelected('firstOption','bbc')" value="bbc"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>CNN</ion-label>
      <ion-radio (ionSelect)="optionSelected('firstOption','cnn')" value="cnn"></ion-radio>
    </ion-item>

  </ion-list>

</ion-content>