title: Not able to get storage variable on another class app.component.ts in IONIC
body: <p>I am working on ionic version 3.20.0 application.</p>
  
  <p>In that, I have feature for login with Facebook.</p>
  
  <p>After user login with facebook successfully, I am setting storage variable in <code>login.ts</code> with <code>this.storage.set('picture', data['picture']['data']['url']);</code></p>
  
  <p>I am able to get this picture variable in other file called dashboard.ts with below code successfully</p>
  
  <pre><code> storage.get('picture').then((imagestore) =&gt; {
        console.log(imagestore);
        if(imagestore){ console.log("IF call");
            this.profilePhoto = imagestore;
       }else{
           this.profilePhoto = "./assets/images/profile.png";
            console.log("Else call");
        }     
      });
  </code></pre>
  
  <p>But I am not able to get picture storage variable in <code>app.components.ts</code>.</p>
  
  <p>Below is my app.components.ts file </p>
  
  <blockquote>
    <p>import { Component, ViewChild }
    from '@angular/core'; import { Platform, MenuController, Nav, App }
    from 'ionic-angular'; import { SplashScreen } from
    '@ionic-native/splash-screen'; import { StatusBar } from
    '@ionic-native/status-bar'; import { Storage } from '@ionic/storage';
    import { Facebook, FacebookLoginResponse } from
    '@ionic-native/facebook';</p>
    
    <p>import { SecureStorage } from '@ionic-native/secure-storage'; import {
    LandingPage } from '../pages/landing/landing'; import { DashboardPage
    } from '../pages/dashboard/dashboard'; import { MarketPage } from
    '../pages/market/market'; import { ImagePicker } from
    '@ionic-native/image-picker';</p>
    
    <p>@Component({    selector: 'app-root',   templateUrl: 'app.html' })
    export class MyApp { 
        @ViewChild(Nav) nav: Nav;   public name: any;   public fbphotoshidden: any;   public firstName: any;   public profilePhoto:
    any;</p>
    
    <p>pages: Array&lt;{title: string, icon: string, component: any}>;<br>
    pushPages: Array&lt;{title: string, icon: string, component: any}>;</p>
    
    <p>constructor(</p>
  
  <pre><code>platform: Platform,
  private secureStorage: SecureStorage,
  private storage: Storage,
  public menu: MenuController,
  private fb: Facebook,
  public app: App,
  public splashScreen: SplashScreen,
  public statusBar: StatusBar,
  public imagePicker: ImagePicker
  </code></pre>
    
    <p>) {</p>
  
  <pre><code>platform.ready().then(() =&gt; {
    // Okay, so the platform is ready and our plugins are available.
    // Here you can do any higher level native things you might need.
    this.splashScreen.hide();
    this.statusBar.styleDefault();
    this.statusBar.overlaysWebView(true);
  
    this.secureStorage.create('jeffrey').then(
      () =&gt; {
        console.log("Secure Storage is ready");
      },
      (error) =&gt; {
        //there should be screen lock available in your application with pin or pattern
        console.log(error);
      }
    );
  
  });
  
  
  storage.get('firstName').then((store) =&gt; {
  
          if(store){
              this.firstName = store;
          }
  
      });
  console.log("Storage Picture");   console.log( storage.get('picture'));
  storage.get('picture').then((imagestore) =&gt; {
    console.log(imagestore);
    if(imagestore){         console.log("IF call");
        this.profilePhoto = imagestore;
    }else{
        this.profilePhoto = "./assets/images/profile.png";
        console.log("Else call");
    }
  
  });
  storage.get('login').then((store) =&gt; {
  
    if(store){ 
      this.nav.setRoot(DashboardPage); 
    }else{
      this.nav.setRoot(LandingPage); 
    }
  
  });
  </code></pre>
    
    <p>}</p>
    
    <p>async selectImage(){
        let options = {
          // max images to be selected, defaults to 15. If this is set to 1, upon
          // selection of a single image, the plugin will return it.
          maximumImagesCount: 1,</p>
  
  <pre><code>  // max width and height to allow the images to be.  Will keep aspect
    // ratio no matter what.  So if both are 800, the returned image
    // will be at most 800 pixels wide and 800 pixels tall.  If the width is
    // 800 and height 0 the image will be 800 pixels wide if the source
    // is at least that wide.
    //width: 100,
    //height: 100,
  
    // quality of resized image, defaults to 100
    //quality: 100
  };
  
  const [imageSource] = await this.imagePicker.getPictures(options);
  this.storage.set('picture', imageSource.replace('file://', ''));
  console.log(this.profilePhoto);
  </code></pre>
    
    <p>}   goHome(){
        this.menu.close();
        this.nav.setRoot(DashboardPage);   }
         goToMarket(){
        this.menu.close();
        this.nav.setRoot(MarketPage);   }</p>
    
    <p>checkFbLogin(){
        this.fb.getLoginStatus().then((status: FacebookLoginResponse) =>{</p>
  
  <pre><code>  let login = status.status;
    if(login == 'connected'){
  
        this.storage.get('picture').then((pic) =&gt; {
  
            if(pic){
                this.profilePhoto = pic;
            }else{
                this.profilePhoto = "./assets/images/profile.png";
            }
  
        });
  
    }else{
           this.profilePhoto = "./assets/images/profile.png";
    }
  
  })
  
  }
  </code></pre>
    
    <p>openPage(page) {
        // close the menu when clicking a link from the menu
        this.menu.close();
        // navigate to the new page if it is not the current page
        this.nav.setRoot(page.component);   }</p>
    
    <p>logout(event){
           this.menu.close();
          this.storage.clear();
          this.nav.setRoot(LandingPage);   }</p>
    
    <p>pushPage(page) {
        // close the menu when clicking a link from the menu
        this.menu.close();</p>
  
  <pre><code>this.app.getRootNav().push(page.component);
  </code></pre>
    
    <p>} }</p>
  </blockquote>