How can I create a login page using Ionic 2 framework that then leads to a tabbed view?

Question

Currenty, in my app.htmlfile, I have:

<ion-tabs>
    <ion-tab [root]="tab1Root" tabTitle="Tab1" tabIcon="time"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="Tab2" tabIcon="paper"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Tab3" tabIcon="more"></ion-tab>
</ion-tabs>

and in my app.js file, after doing the proper imports of these pages, I have:

    this.tab1Root = Page1;
    this.tab2Root = Page2;
    this.tab3Root = Page3;

I want the application to open with a login page, and then from there progress to this tabbed view. I'm not sure how to logically set this up in the context of app.html and app.js

I'm only interested in answers involving Ionic 2 (and Angular 2+), not the older versions.

Answer 1

In your app, define this:

export class YourApp {
  rootPage: Type = LoginPage;

  constructor(app: IonicApp, platform: Platform) {
    platform.ready().then(() => {

    });
  }
}

In your LoginPage, it should have this:

export class LoginPage {
    constructor(nav: NavController) {
        this.nav = nav;
    }

    doLogin() {
        if (loginSuccessful) {
           this.nav.setRoot(YourTabsPage);
        }
    }
}