Conditional rootPage

Ionic Framework ionic-v3
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;
}

1 Like
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);

2 Likes
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.

1 Like
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);
3 Likes
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

1 Like
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 
// ...
}
1 Like