How do I access a value from storage globally in Ionic 4?

user_10646827 0
Viewed 2617

I have some values that are saved to sqlite storage when a user logs in, and I need those values to be available all over the app.

I've created a service to fetch and store those values, but it's not working because the only way I've been able to figure out how to do this is by getting the values in a promise, which I don't think will return them outside of then().

value1: string;
value2: string;

constructor(
    private storage: Storage,
) {
    Promise.all([
        this.storage.get('value1'),
        this.storage.get('value2'),
    ]).then((result) => {
        this.value1 = result[0];
        this.value2 = result[1];
    });
}

How can I go about getting these values in my service, and then calling them in my pages like so?

this.value1 = this.myService.value1;

Edit: Per Sergey Rudenko's answer, I created a GlobalService and called the code from a page. Here's the code I used.

GlobalService

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

@Injectable({
    providedIn: 'root'
})
export class GlobalService {

    public value1: string;

    constructor(private storage: Storage) {
        this.storage.get('value1').then((value) => {
            this.value1 = value;
        });
    }
}

MyPage

import { Component, OnInit } from '@angular/core';
import { GlobalService } from '../../services/global.service';

@Component({
    selector: 'app-index',
    templateUrl: './index.page.html',
    styleUrls: ['./index.page.scss'],
})
export class IndexPage implements OnInit {

    public value1: string;

    constructor(private global: GlobalService) {
        console.log('value1=' + this.global.value1);
        // returns: value1=undefined
    }
ionic-framework angular
1 Answers

You need to create a shared service (provider) that each component can import and access public variables (which makes them “global” basically).

Storage is async and thus you may want to assign returned in promise values to vars in the shared provider:

    public globalValue1: string;
    public globalValue2: string;

    constructor(
        private storage: Storage,
    ) {
      this.storage.get('value1').then((value) => { this.globalValue1 = value });
      this.storage.get('value2').then((value) => { this.globalValue2 = value });

    }

Then in your component you import shared provider and access global variables

UPDATE:

In your use case it seems like you are attempting to read global var that has not yet received assigned value as part of async call to Storage. So since constructor method in your component is called before the value gets assigned - you see undefined. Now if your use case is that you want to render such value in your template you can use binding that guards from undefined values: {{ foundation.globalVar? }} - the question mark will indicate that the value might not be available.

The only workaround to have a value there at component constructor call time that I k now of - you may want to consider persisting data in a sync storage - such as browser's "local storage" but that will only work if your data is small.

user_40053660
Related