0

I am a newbie of IONIC. I have one simple problem that I could not use promise value for my typescript class. It is returning the object but I need the value. Otherwise one of my conditions doesn't fulfill. Can anyone guide me how can be used this promise value into typescript class? Code is

app.component.ts 

import { TabsPage } from '../pages/tabs/tabs';
import {SocialActivitiesPage} from '../pages/social-activities/social-activities';
import { HomeTabsPage } from '../pages/home-tabs/home-tabs';
export class MyApp implements OnInit {
  rootPage:any = TabsPage;
  socialProfile:any = SocialActivitiesPage;
  hometabs:any = HomeTabsPage;

@ViewChild('nav') nav:NavController;

  constructor(platform: Platform, 
      statusBar: StatusBar, 
      splashScreen: SplashScreen,
      public menuCtr:MenuController,
      private storage: Storage,) {

  }
  token:Promise<any> = this.storage.get('token').then((val)=>{
    return this.token = val; 
  }).catch(
    (err)=>{
      console.log(err);
    }
  )

  ngOnInit(){
    if(this.token!==null){
      this.rootPage = HomeTabsPage; 
    }
  }
  ionViewDidLoad(){
    console.log(this.token);
  }

}

Above code is my app.component.ts where I resolved my token promise by below this

token:Promise<any> = this.storage.get('token').then((val)=>{
    return this.token = val; 
  }).catch(
    (err)=>{
      console.log(err);
    }
  )

And tried to make one condition into ngOnInit()

  ngOnInit(){
    if(this.token!==null){
      this.rootPage = HomeTabsPage; 
    }
  }

unfortunately here this condition is not working. Whether my token is null or not null. Here this.token is one object, not any value. But If I call this token from app.html it returns as a string value, not an object. I tried to call this token into app.html like this way

{{token}}

It is showing the string value. Unfortunately, from the typeScript class, it is always showing my one object that has some _zoneSymboleType and _zoneSymboleValue. Here in _zoneSymboleValue I can see my value. So my question How can I use this.token as a value, not as an object into my typeScript conditions.
It would be highly appreciated your effort.
Thanks

Garten786
  • 1
  • 1
  • 5

1 Answers1

1

This is asynchronous, so it takes a while for the response to arrive, you can resolve this by calling that function in your OnInit instead:

ngOnInit() {
  this.storage.get('token').then((val)=>{
    if(val!==null){
      this.rootPage = HomeTabsPage; 
    }
  })
}

Read more about async: How do I return the response from an Observable/http/async call in angular2?

AT82
  • 71,416
  • 24
  • 140
  • 167
  • You are awesome Man! Working like a charm. Could you please tell me one tinny hint that This functions works after refreshing the whole App, otherwise It goes the previous state. Should I use ionViewDidLoad() or windows.location.reload(). And I heard about that windows.location.reload() function doesn't work on mobile. So What would be the optimal solution for this? @AJT_82 – Garten786 Dec 22 '17 at 17:12
  • I'm having a bit trouble understanding here. You want what to happen when you refresh? :) Or do you mean that you want to refresh? :) – AT82 Dec 22 '17 at 17:19
  • I am really sorry, `this.rootPage=HomeTabsPage` is changing from my app.html `` If token is not null it will change the my nav Footer from rootPage = TabsPage to this.rootPage = HomeTabspage.So that If my user does login then my `this.rootPage= HomeTabsPage` will be changed according to token logic. I am pushing my HomeTabsPage from my `Singin()` method. This one is last part of my Signin() methods `this.navCtrl.setRoot(HomeTabsPage)`.For changing this I need to write `window.location.reload()` – Garten786 Dec 22 '17 at 19:53