ionic 3 read stored value native storage in function ionViewDidLoad ()

Question

I'm having a problem, I'd like to read a value saved in the Native Storage Cordova plugin in the function -> ionViewDidLoad ().

Description of the function:

ionViewDidLoad () = "Runs when the page has loaded. This event only happens once per page being created. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The ionViewDidLoad event is good place to put your setup code for the page."

The action I try to do and display a message when opening the application. But if the user does not want it to open each time the application starts, I want to make a condition in the function ionViewDidLoad () so that it opens according to the user's wishes.

Home.ts page

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

    import { ParamProviders } from '../../providers/paramProviders';
    import { NativeStorage } from '@ionic-native/native-storage';

    @Component({
      selector: 'page-home',
      templateUrl: 'home.html',
      providers: [ParamProviders]
    })
    export class HomePage {

      boolBienvenue: boolean;

      constructor(public navCtrl: NavController, private alertCtrl: AlertController, private nativeStorage: NativeStorage, private paramService: ParamProviders) {
      }

      ionViewDidLoad() {
         this.boolBienvenue1()
         console.log(this.boolBienvenue);
         if ( this.boolBienvenue == true ) {
            this.demarrage();
        }
      }

     public boolBienvenue1() {
        this.nativeStorage.getItem('storage_pref')
          .then(
            data => this.boolBienvenue = data.bienvenue,
            error => console.error(error)
        )

  }

     public demarrage() {
        let alert = this.alertCtrl.create({
          title: 'Bienvenue dans HackChat !!',
          message: 'Avant de discuter avec vos amies ou vos proches, veuillez configurer l\'application en y indiquant l\'adresse de votre serveur ainsi que votre login et mot de pass dans l\'onglet Paramétres. Une fois que vous serrez connecté, vous pourrez discuter.<br />Allez y c\'est à vous !!<br /><br />Voulez vous que cette bulle d\'information s\'affiche lors de l\'ouverture de HackChat ?',
          buttons: [
            {
              text: 'Non',
              handler: () => {
                console.log('Disagree clicked');
              }
            },
            {
              text: 'Oui',
              handler: () => {
                console.log('Agree clicked');
              }
            }
          ]
        });
        alert.present();
      }
}

Parameter.ts Page

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 = true;
    notification: boolean = false;
    vibration: boolean = false;

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

Can you help me Thank you

Answer 1

Accessing the storage is an asynchronous job, therefore your following code most probably doesn't work because the result of the async job is resolved after you try to ask if your boolean value is set

ionViewDidLoad() {
     this.boolBienvenue1() // Here you don't wait for async job
     console.log(this.boolBienvenue); // So this value might or might not be set
     if ( this.boolBienvenue == true ) {
        this.demarrage();
    }
  }

 public boolBienvenue1() {
    this.nativeStorage.getItem('storage_pref')
      .then(
        data => this.boolBienvenue = data.bienvenue,
        error => console.error(error)
    )
 }

You could, for example, modify your code like following:

 ionViewDidLoad() {
     this.nativeStorage.getItem('storage_pref')
      .then(
        (data) => {
             if ( data !== null && data.bienvenue ) {
                this.demarrage();
             }
        }
        error => console.error(error)
    )
 }

P.S.: Not related to your question, but if I may, to test if a boolean is true in a condition you do not need to add == true, the boolean value itself is enough. I mean:

 if (something == true)

should be written

 if (something)