How to save a state for checkbox in Popover?

Ionic Framework ionic-v3
1

Hi,

I’ve a checkbox in Popover. Once it is checked and I close the checkbox and when I open the popover again it is unchecked.

How I can save the checkbox even after restarting my application?

Best Regards

2

Anyone there to reply?

3

Post your code snippet

4

I would imagine a boolean, an array of values, and the storage module of your choosing could combine to make that happen

5

I want the checkbox checked even after popover is closed. Currently checkbox gets unchecked when I close the popover.

Here is the code:

Popover.html

<ion-list class="popover-items">
  <ion-item>
    <ion-label>English</ion-label>
    <ion-checkbox (click)="activateEnglish()"></ion-checkbox>
  </ion-item>
</ion-list>

Popover.ts

activateEnglish(){
    this.textEle.classList.toggle('showEnglish');
}
6

In ion-checkbox, put checked=“value”

In popover.ts,

value: boolean=false

activateEnglish(){
value= true
}

7

I tried this but it is not working.

8

Please anyone else have the solution?

9

you should store it in localstorage

10

How can I save checkbox state in localStorage? I tried to find similar solution but I couldn’t get it.

11

Myself I achieve this in this way: (By using global variables, this is not the correct way, but I couldn’t think of an other way)

I create an configProvider

import { Injectable } from '@angular/core';
import { Storage} from "@ionic/storage";

@Injectable()
export class ConfigProvider {

    public englishActivated: boolean;

	constructor(private storage: Storage) {
      this.loadConfigData();
	}
  }


loadConfigData(){
	this.storage.ready().then(() => {
		this.storage.get('englishActivated').then((val) => {
		  this.englishActivated = val;
		});
	
	 })
  })

import configprovider and add ngbind popover.ts

//import configProvider
<ion-list class="popover-items">
  <ion-item>
    <ion-label>English</ion-label>
    <ion-checkbox  [(ngModel)]="configProvider.englishActivated" (click)="activateEnglish()"></ion-checkbox>
  </ion-item>
</ion-list>

and inside of your activateEnglish function you should also make sure the new state is being saved to storage

activateEnglish(){
    this.textEle.classList.toggle('showEnglish');
       this.storage.ready().then(() =>
      {
            this.storage.set('activateEnglish',boolean true / boolean false)
      });
}
12

Hey man!

I tried this solution many times but I get an error that

Runtime error Cannot read property of "englishActivated".

13

I now see I set the value activateEnglish but I get englishActivated, make the setted and the getted value the same, whichever you like, and you error should be gone.