Conditional rootPage


#1

I would like my entry page to be conditional. So based of a condition(a value stored in sqllite) the root page would either go to page 1 or page 2:

class MyApp {
constructor(app: IonicApp, platform: Platform) {

// set up our app
this.app = app;
this.platform = platform;

this.platform.ready().then(() => {
     this.storage = new Storage(SqlStorage);

    this.storage.get('some_condition').then((condition) => {

if(condition){
        this.rootPage = Page1;
  	  }else{
        //stay on login page
this.rootPage = Page2;
    }
    this.initializeApp();
 });
  });

}


#2

try this:

let self = this;
this.storage.get(‘some_condition’).then((condition) => {
if(condition){
self.rootPage = Page1;
}else{
//stay on login page
**self.**rootPage = Page2;
}


#3

Didn’t work. I am not sure how this is any different then my code. Self still points at this, not sure what is different at all?


#4

Have you tried using the NavController? After importing it and injecting it you could use:

this.nav.setRoot(Page);


#5

“this” is different inside “then(function)” …
If you are trying this app on browser it won’t work because of this.platform.ready works only on android or ios device. you should write it in construct or inside ngOnInit()


#6

@Ashurbeyli did you get your conditional root page to work?


#7

Yes, this is what I wrote:

> let self = this;
>         auth.loadUserCredentials(function(){
>           if(auth.isAuthenticated){
>             self.isAuthenticated = auth.isAuthenticated;
>             self.userData = auth.userData;
>             self.rootPage = HomePage
>           }else{
>             self.isAuthenticated = auth.isAuthenticated;
>             self.rootPage = AuthorizationPage
>           }
>         })

and in app.html

<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>


#8

Hmm, I’ve been trying something almost identical but it hasn’t worked for me yet. Thanks.


#9

O have tried this on an Android device and it has not worked.


#10

@richardshergold, @polska03, have you found any solution that worked for you ?


#11

Hey guys,

just sharing what i’ve done. It is working with the beta-9.

in app.ts, my constructor looks like:

  rootPage: any;
  pages: Array<{title: string, component: any}>;

  constructor(
    private platform: Platform,
    private menu: MenuController,
    private authService: AuthService
  ) {
    this.authService.isUserLoggedIn().forEach(isUserLoggedIn => {
      console.log("is user logged in? " + isUserLoggedIn);
      this.rootPage = isUserLoggedIn ? HelloIonicPage : ListPage;
    });

    this.initializeApp();

AuthService is just a simple service that i’ve made myself. authService.isUserLoggedIn returns an Observable.


#12

Hey folks

I’m struggling with the same issue (FYI: I’m new to Ionic v2, so please be gentle ;-)). Within the constructor of the main component (using ionicBootstrap to initialize the app) I try to set the rootPage based on condition. The condition is met for sure, I verified by logs. Here’s the simplified code:

export class MyApp {
rootPage: any;

constructor(public platform: Platform) {
    let self = this;

    platform.ready().then(() => {
        if (true) {
            self.rootPage = LoginPage;
        } else {
            self.rootPage = HomePage;
        }
    });
}
}

ionicBootstrap(MyApp, null, {
mode: 'md'
});

Any idea where the problem is? Very much appreciated, thanks.


#13

As a side note, in Typescript when you use the fat arrows (i.e. =>) you don’t need to do the whole let self = this; trick. Fat arrows will automagically do that for you. Which is to say, you can safely use this inside of fat arrow functions.

As for the question presented, this is just a guess but perhaps you can’t set the rootPage inside of platform ready callback? This is just a guess based off of my code, which doesn’t set it inside of the platform ready callback.


#14

Thanks for the sidenote and your thoughts. It’s actually working when putting it outside of the platform ready callback. Unfortunately, I’ve the wait for a plugin which decides where to navigate to. Will keep you posted.


#15

Very strange. It seems to work fine for me when I set the rootPage in the callback.

Does it work if you call setRoot on the Nav element?

You can do that by adding:

@ViewChild(Nav) nav: Nav;

then inside of the callback doing

this.nav.setRoot(MySuperAwesomePage);

#16

Excellent, @SigmundFroyd, thanks! The solution with using ViewChild and setRoot is working fine. Although I had to use self = this, the reference of this was being changed within the callback.


#17

I think the best way is to generate a third page which will redirect to one or other


#18

I want to change root page then i just tried this couple of lines. :
from page x to dashboard(side menu main page ):

this.navCtrl.setRoot(DashboardPage);
this.navCtrl.popToRoot;

#19

Hi, I got multiple conditional rootPages, I tried both above, both got some issue.

export class MyApp {
rootPage: any = null;

constructor(public platform: Platform) {

    platform.ready().then(() => {
        switch (condition) {
          case xxx:
            this.rootPage = LoginPage;
            break;
          case yyy:
            this.rootPage = HomePage;
            break;
          // ....
    });
  }
}

In this way, I got blank first screen occasionally, app got resumed after several reboot. I inspected the page, there was no rootPage under ion-nav which told me rootPage was not successfully set, sometimes.

And I also tried using navCtrl.setRoot(whichPage), the blank first screen gone, the the bottom tool bar lost response for HomePage which used a toolbar in the bottom of screen, quite weird.

Any idea?

I’m on ionic 3.6 and cli 3.7, iOS 10


#20

Is there any reason you wait for platform.ready()?
I have a similar case for my app (http://www.sleep-app.com) and it works without problems.

I show an IntroPage if it’s the first time the user opens the app -> if not i show the HomePage

// app.component.ts
constructor() {

const skipIntro = localStorage.getItem('skipIntro');
      if (skipIntro) {
        this.rootPage = HomePage;
      } else {
        this.rootPage = IntroPage;
        localStorage.setItem('skipIntro', 'true');
      }

// platform ready stuff 
// ...
}