One Ionic 2 App with All Layouts, Blank, Menu, and Tabs

This tutorials really just extends this article on showing and hiding the menu. Here we go one step further and start with a ‘Blank’ layout, adding just two buttons to let the user launch into either a tab or menu layout. A “back to base” button is added to to each child layout for quick navigation back to the blank homescreen.

This time I’ve started with the tabs starter project, as it’s closer to how we actually want to structure the app. I’ve created a new “base” folder for the new blank base page. I’ve then taken the app component and html from the sidemenu starter project, renamed them to menu.component.ts and menu.html respectively, and placed them in a new menu folder under pages. I’ve also taken the different tabs and moved them from the base pages folder to under the tabs folder so they are grouped separately from the rest of the app. Finally I’ve moved Page1 and Page2 from the sidemenu starter project into the menu folder here. I’m really just taking everything from the “pages” folders in both the sidemenu and tabs starter projects and combining and grouping them into one project. Just remember to update all your imports to match the new folder structure. See the image below or the github demo project here.

So now under “pages” you should have a new (currently blank) base component to act as the blank home page, and then a menu and tabs section, each containing the pages from their respective starter project. Let’s create our base component.

Base Component

The base component is just a simple component with no UI other than two buttons. Fill in the component as follows, and be sure to add it to the app module so it can be used.
base.component.ts

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

import { NavController } from 'ionic-angular';
import { TabsPage } from "../tabs/tabs";
import { MenuComponent } from "../menu/menu.component";

@Component({
  templateUrl: 'base.html'
})
export class BasePage {

  constructor(public navCtrl: NavController) {}

  openTabs() {
    this.navCtrl.push(TabsPage);
  }

  openMenu() {
    this.navCtrl.push(MenuComponent);
  }

}

base.html

<ion-content text-center>
    <button ion-button icon-left (click)="openTabs()">
      <ion-icon name="albums"></ion-icon>
      Open Tabs
    </button>

    <button ion-button icon-right (click)="openMenu()">
      Open Menu
      <ion-icon name="menu"></ion-icon>
    </button>
</ion-content>




Not too much to this, basic code so far, we have two functions, one that pushes the tabs page onto the nav, and one that pushes the menu onto the nav. Please note that when renaming app.component.ts in the sidemenu starter project I also renamed the component itself to MenuComponent. Again see the github project for more details.

Make the base component the new page pushed to root

The tabs starter project sets the tabs page as the root in the app component. This is no longer what you want, instead set the Base page we just created as the root page in app.component.ts. Now you should make sure all your components have been added to the app module. You’ll need to make sure all pages are present, my declarations and entry components now look like this:

declarations: [
  MyApp,
  AboutPage,
  ContactPage,
  HomePage,
  TabsPage,
  BasePage,
  MenuComponent,
  Page1,
  Page2
],
imports: [
  IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
  MyApp,
  AboutPage,
  ContactPage,
  HomePage,
  TabsPage,
  BasePage,
  MenuComponent,
  Page1,
  Page2
],

At this point you should be able to start the app, press the buttons, and see the app launch into either the menu or tabs depending on which you pressed.




Getting back to base

You’ll notice that when you click into one of the new layouts there’s no way to get back to the base page. Since we haven’t hooked up the deep linker you can’t use the browser back button, and the new layouts have no UI to get back to the empty page. There are plenty of ways to handle this, but here I just create a simple component that I’ll add to the header of each page.

import { Component } from '@angular/core';
import { App } from "ionic-angular";

import { BasePage } from "../pages/base/base.component";

@Component({
  selector: 'mld-back-to-base',
  template: '<button style="float: right; margin: 0;" small ion-button (click)="backToBase()">Back to Base</button>'
})
export class BackToBaseComponent {
  rootPage = BasePage;

  constructor(private app: App) {}

  backToBase() {
    this.app.getRootNav().setRoot(BasePage);
  }
}

This is just a simple component that will simply set the app navigation back to the base page regardless of where it is clicked from. I then just add this to the title section of each header bar and I’ve got a universal back button. I just did a quick inline style here for demonstration purposes, but of course placement and styling of the button is up to you.

Summary

That’s it, the tabs and menu’s navigations will continue to work, as their own navs will handle them. If you run into any issues just remember you can pull down the github project and run it locally to see everything working, but feel free to ask any questions in the comments below.