CODEWITHSUNDEEP
angularionic-frameworkionic3ion-toggle
Murlidhar Fichadia
Murlidhar Fichadia

Reputation: 2609

Ion-toggle button does not show correct toggle - Ionic 3, Angular 4

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>

Upvotes: 1

Views: 7192

Answers (2)

Amit Gandole
Amit Gandole

Reputation: 576

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);

  }

Upvotes: 2

marvstar
marvstar

Reputation: 417

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>

Upvotes: 1

Related Questions