Reputation: 2609
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);
}
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
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
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