Combine an ion-tabs with an ion-nav in Ionic 2

If you'd like to present a tabular login flow during the user's sign up and log in phase and a tabbed application flow for the day-to-day use of your app, you can use Angular 2's templating functionality to provide multiple view layouts in your root component (app.html):

In the above code snippet, we have a menu and tabs layout if the user is logged in and a navigation controller if a user is not. For the above to work, we need to

  import { User, Auth } from '@ionic/cloud-angular';

... and make instances of these providers available to our template, e.g. through our constructor:

  constructor(

    public user: User,

    public auth: Auth

  )

Controlling the tabs

In the app I'm currently working on, some menu options activates a certain tabs, whereas other menu options open a page in a modal view. To control the tabs, I 

  import { Component, ViewChild } from '@angular/core';

  import { Platform, MenuController, ModalController, Tabs } from 'ionic-angular';

... and add a ViewChild declared as any in my app:

  @ViewChild('content') tabs: any;

The any part is important, since the app doesn't actually have a Tabs control during its login/sign-up flow. Once I'm confident that the tabs is available (in my menu item click handler), I can safely cast the property and select the appropriate tab page: