1

I have my ion-toggle defined and I have set 2 properties to it as below:

<ion-toggle [checked]="storageStatus" (ionChange)="updateItem()"></ion-toggle>

everything is working just fine, I am able to toggle and change values to the localStorage and so on. But I am not sure why toggle button falls back to off state (or false state). when I move to another page and comeback.

Only Toggle button shown "visually" falls to Off state and not the values. I want button to be in the state in which I have set in localStorage while toggling.

The toggle value is correct and so binding value too. 

storageStatus: any;

updateItem(){
  this.storageStatus = !this.storageStatus;
  window.localStorage.setItem('item', this.storageStatus);
}

Entire Code - update

Below Solution works for me now. I am not sure if its a good approach or not.

app.component.ts (when app loads setItem to true)

ngOnInit() {
  window.localStorage.setItem('item', 'true');
}

typescript file

import { Component} from '@angular/core';
import { NavController, NavParams, ToastController } from 'ionic-angular';

@Component({
  selector: 'page-settings',
  templateUrl: 'settings.html',
})
export class SettingsPage{

  constructor(public navCtrl: NavController, public navParams: NavParams, private toastCtrl: ToastController) {
  }

  //THIS IS THE LINE THAT DID THE TRICK OF SHOWING ION-TOGGLE AS PER item value
  storageStatus: string = window.localStorage.getItem('item');

  updateItem(){
    window.localStorage.setItem('item', this.storageStatus);
    this.presentToast();

  }


    presentToast() {
      console.log("present Toast");
      const toast = this.toastCtrl.create({
      message: 'New Changes Updated',
      duration: 3000,
      position: 'bottom'
    });

    toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });

    toast.present();
  }
}

html file

<ion-content padding>
    <ion-item-group>
    <ion-item>
      <ion-label>Item Status</ion-label>
     <ion-toggle [(ngModel)]="storageStatus"></ion-toggle>
    </ion-item>

    </ion-item-group>
    <button ion-button block color="light" (click)="updateItem()">Save Changes</button>

</ion-content>
Murlidhar Fichadia
  • 2,589
  • 6
  • 43
  • 93
  • well how are you setting the value when navigating to page? There's not enough code to reproduce this issue ;) – AT82 Nov 24 '17 at 18:38
  • Could you please add the code of the entire page, so we can take a look at how these items are being initialized? – sebaferreras Nov 25 '17 at 09:57
  • @sebaferreras 2-way binding alone did not do the trick, I had to add these : `storageStatus: string = window.localStorage.getItem('item');` For some reason I cant use boolean but string as things stored in localStorage are in string – Murlidhar Fichadia Nov 25 '17 at 10:22
  • I would save the `ion-toggle` value to a boolean value instead of string. You can convert the localestorage string when you get the value and also when you set the value. – marvstar Nov 27 '17 at 07:09

2 Answers2

2

I think marvstar gave right answer but solution was not proper.

You need to use both two way binding and checked.

When page initializes you have to check what is current value in localstorage.

ngOnInit(){
  this.storageStatus=localstorage.getItem('item');
}

In HTML : Add condition in [checked] 

<ion-toggle [checked]="storageStatus == true?true:false"  [(ngModel)]="storageStatus" (ionChange)="eventChange($event)" ></ion-toggle>

In TS file Add eventChange method and use $event to use actual toggle values :

 eventChange(toggleValue){
     console.log(toggleValue._value)
     if(toggleValue._value==true){
       let i=true;
     }else if(toggleValue._value==false){
       let i=false;
     }

    localStorage.setItem('storageItem',i);

  }
Amit Gandole
  • 558
  • 8
  • 20
1

Just use two way databinding instead of one way and use the ngModel instead of checked.

Change [checked]="storageStatus"

to [(ngModel)]="storageStatus"

I'm using it as follow:

<ion-toggle checked="false" [(ngModel)]="settings.showIcon"></ion-toggle>
marvstar
  • 417
  • 5
  • 21
  • that's what I did initially, then moved to one way binding. I will fall back to 2-way binding. can you tell me what is settings.showIcon here? do I need this: `(ionChange)="updateItem()"` can you show exactly what needs to be done both in `` tag and in typescript file. – Murlidhar Fichadia Nov 24 '17 at 16:34
  • you don't need the ionChange listener because the two way binding will do that work of changing the boolean value for you. – marvstar Nov 27 '17 at 07:06