ionic 3 native-storage in a provider

Question

I implanted the cordova module "native storage" in a provider. But I can not send and retrieve the values of variables stored in native storage. Here is my code:

Page parameter.html

<ion-header>

  <ion-navbar>
    <ion-title>Paramétres</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

    <ion-list>
    <ion-list-header>Connection Serveur</ion-list-header>
        <ion-item-group margin-bottom>
          <ion-item>
            <ion-input type="text" placeholder="Adresse du serveur" [(ngModel)]="linkServer"></ion-input>
            </ion-item>
            <ion-item>
            <ion-input type="text" placeholder="Nom d'utilisateur" [(ngModel)]="user"></ion-input>
            </ion-item>
            <ion-item>
            <ion-input type="text" placeholder="Mot de passe" [(ngModel)]="password"></ion-input>
          </ion-item>
        </ion-item-group>

        <ion-list-header>Options</ion-list-header>
        <ion-item-group margin-bottom>
        <ion-item>
                <ion-label>Message de bienvenue</ion-label>
                <ion-toggle [(ngModel)]="bienvenue"></ion-toggle>
            </ion-item>
            <ion-item>
                <ion-label>Notification</ion-label>
                <ion-toggle [(ngModel)]="notification"></ion-toggle>
            </ion-item>
            <ion-item>s
                <ion-label>Vibration</ion-label>
                <ion-toggle [(ngModel)]="vibration"></ion-toggle>
            </ion-item>
        </ion-item-group>

        <button ion-button outline color="dark" style="width: 100%" (tap)="aPropos()">A Propos</button>
    <br />
    <button ion-button full color="dark" (tap)="this.paramService.savePref()">Enregistrer</button>

    <button ion-button full color="dark" (tap)="this.paramService.loadPref()">Charger</button>
    </ion-list>

</ion-content>

Page Parameter.ts

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

import { ParamProviders } from '../../providers/paramProviders';

/**
 * Generated class for the ParameterPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@Component({
  selector: 'page-parameter',
  templateUrl: 'parameter.html',
})

export class ParameterPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, private alertCtrl: AlertController, public paramService: ParamProviders) {
  this.paramService.linkServer;
  this.paramService.user;
  this.paramService.password;
  this.paramService.bienvenue;
  this.paramService.notification;
  this.paramService.vibration;
  }



  ionViewDidLoad() {
  }

  // ionViewWillEnter() {
  //   this.paramService.loadPref()
  // }

  // ionViewWillLeave() {
  //   this.paramService.preferences()
  // }

  aPropos() {
    let alert = this.alertCtrl.create({
      title: 'A Propos',
      message: '<b><u>Created by :</u></b> Mezergues Romain et Thierry.<br /><b><u>Verson :</b></u> 1.00<br /><b><u>Site web :</b></u> <a>http://hackeet.com</a><br /><b><u>Email:</u></b> <email>[email protected]</email>',
      buttons: ['Ok']
    });
    alert.present()
  }


}

paramProvider.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

import { NativeStorage } from '@ionic-native/native-storage';

/*
  Generated class for the PeopleSearch provider.
  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class ParamProviders {

    linkServer: string ;
    user: string;
    password: string;
    bienvenue: boolean;
    notification: boolean;
    vibration: boolean;

  constructor(public http: Http, private nativeStorage: NativeStorage) {
  }

public savePref(): void {
    this.nativeStorage.setItem('storage_pref', {
        linkServer: this.linkServer,
        user: this.user,
        password: this.password,
        bienvenue: this.bienvenue,
        notification: this.notification,
        vibration: this.vibration
    })
    .then(
      () => console.log(this.linkServer),
      error => console.error('Error storing item', error)
    );
}

public loadPref():void {
  this.nativeStorage.getItem('storage_pref')
    .then(
      data => {
        this.linkServer = data.linkServer;
        this.user = data.user;
        this.password = data.password;
        this.bienvenue = data.bienvenue;
        this.notification = data.notification;
        this.vibration = data.vibration;
      },
      error => console.error(error)
  );
}

  // load() {
  //   if (this.data1) {
  //     return Promise.resolve(this.data1);
  //   }
  //   // Dont have the data yet
  //   return new Promise(resolve => {
  //     this.http.get('./assets/json/parameter.json')
  //       .map(res => res.json())
  //       .subscribe(data => {
  //         this.data1 = data;
  //         resolve(this.data1);
  //       });
  //   });
  // }  

}

I do not have an error when compiling on the browser or natively. I wish that when the form is filled, the values will be transmitted and saved in native-storage found in "paramProviders.ts", and then retrieve the saved values and use them on other pages.

Cordially.

Answer 1

You have to change your [(ngModel)] like below one

<ion-item>
    <ion-input type="text" placeholder="Adresse du serveur" [(ngModel)]="this.paramService.linkServer"></ion-input>
</ion-item>

You have add this with model this.paramService. You already added for button.

Also you can remove below like from param page.ts

this.paramService.linkServer;
this.paramService.user;
this.paramService.password;
this.paramService.bienvenue;
this.paramService.notification;
this.paramService.vibration;