Category Archives: Ionic

How to conditionally set the root page of an Ionic app

The rootpage of an Ionic app is the first page that is displayed after the root component (normally app.component.ts). The rootpage is the start of the app navigation and is always the first element in the navigation stack. It can be navigated to like this after the app is initialized and running:

@Component(....)
class MyComponent {
  constructor(navCtrl: NavController){}

  gotoRoot() {
    this.navCtrl.setRoot(MyAwesomePage); //sets a new rootPage and navigates there
  }

  poptoRoot() {
    this.navCtrl.popToRoot();  //return to the existing rootPage and navigate there
  }
}

The first rootpage upon app initialization is set in the AppComponent that belongs to the (root) AppModule. In the docs its only mentioned that you define the rootPage as a quasi static property of the AppComponent like this example taken directly from the Ionic documentation:

@Component(
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
class MyApp {
  // set the rootPage to the first page we want displayed
  public rootPage: any = StartPage;

  constructor(){
  }
}

Its not mentioned anywhere, but you can also define rootPage lazy and conditionally, like f.i. when you have a local database and want to first initialize the database driver and look into it to check if the user is already logged in or not. Depending on the result you want to display a LoginPage as the rootpage or your normal standard page for users.

That is done almost always asynchronous so you can’t define the rootPage in the constructor of your AppComponent because you don’t know it yet.

In this case you can leave the rootPage uninitialized and just set it later. Ionic automatically grabs any changes and navigates to the rootPage:

@Component(
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
class MyApp {
  // don't set the rootPage initially to anything
  public rootPage: any

  constructor(private userService: UserService){
    this.userService.initDatabaseAndUser().subscribe(user => {
      if (user.isLoggedIn) {
        this.rootPage = StartPage;
      } else {
        this.rootPage = LoginPage;
      }
    }
  }
}

How to implement custom page transitions in an Ionic app

Ionic is a fantastic framework to write your own apps. It is based on Cordova and angular and enables you to quickly write good looking apps without too much effort.

Depending on the platform you use to start your app Ionic even comes with pre-defined page transitions to animate the navigation of one page to another. The standard page transition on iOS is a swipe from left or right. It looks like this:




The documentation for page transitions in Ionic however is quite confusing and as a beginner it took some time to understand what transitions are there and which should be used. The official documentation contains a page for the NativePageTransitions module, however I advise you not to use that. Not only that it hasn’t received any updates for a long time, but to do the animations the modules takes a screenshot of the starting and the landing page and is animating the two images. This seems a weird way to do that and the amount of open issues while not issues get closed speaks for itself.

What you should use, is an integrated feature of the Ionic NavController class which you already use to navigate between your pages. This feature is enabled by default (depending on the platform) but it can be configured with your navigation call too:


this.navCtrl.push(MyPageComponent, null, {animate: true, animation: "transition"});  

With “animate: true” you turn on the animation (which is the standard setting) and “animation: transition” sets the animation to use to animate the page transition. Its a string and “transition” means to use the standard transition depending on the current platform. When you want to use the iOS transition on an android platform you can initiate the navigation like this:


this.navCtrl.push(MyPageComponent, null, {animate: true, animation: "transition-ios"});  

There are no other built-in transitions you can use (like slide-down, slide-up or scale-out) and I could find absolutely no official documentation how to implement a custom transition. However, there is a quasi-official way to implement your own transitions. Continue reading How to implement custom page transitions in an Ionic app