[Updated] Ionic 2 – Side Menu and Tabs

Updated 27 January: Ionic 2 Final, like the actual final, version 2.0.0, is here and ready. This article has been updated to reflect this change.

‘The future is here!’, they say. In this case, Ionic 2 is ready and awesome. In this post, I won’t waste your time telling the awesome features Ionic 2 comes with, which you all probably know and love. If not, you wouldn’t be here to get your head around how to setup Ionic 2 Side Menu + Tabs.

Depending on how complex you wish you app to be, having both Tabs and Side menu can be a useful experience for your users. The power of Side Menu and the easy figuring of tabs are a strong combined force for good, giving you more room to display your content.

Why am I still typing? I guess ‘am excited!

What we want and What we’ll do

It is simple. We want an Ionic 2 project with Tabs as well as a side menu. What will we do? Exactly that.

So, let’s get going.

Start Ionization

Install Ionic

1

npm install-gionic

Are you waiting for me to tell you how to install Nodejs or NPM? Okay, keep waiting…

We want to use Ionic version 2, so in your terminal, let’s get that up and running. Issuing the terminal command below walks through the end-to-end process of setting up the project, and installing all the Nodejs dependencies required. When the prompt returns, you’re good to simply enter the project folder directory and start the Hadron Collider. But… We won’t be starting the collider yet. Let’s finish with all, and we’re good to kick the collider to do its part.

1

2

3

// create a new ionic project called SidemenuTabs

// using the blank template. I want ionic version 2

ionic start SidemenuTabs blank--v2

We will be building the project from scratch, to help you get a feel for the entire process. That helps for a better understanding, sometimes.

Side Menu

First of all, with our project properly initialized, and changed into the SidemenuTabs directory, we want to create our side menu first.

By the way, the image below represents the default folder structure from which we’re going to build this sidemenutabs project on. This is pretty much what you should get after running the above commands up till now

Folder Structure Ionic 2

If you’ve seen how the ‘Tutorial’ template from Ionic handles the Side Menu, that’s exactly what we want to achieve.

Bring on the particles…

From here onwards, I will be giving the code snippets and provide short comments in them as to where to place the code and why

src/app/app.component.ts

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

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

import{Nav,Platform}from'ionic-angular';

import{StatusBar,Splashscreen}from'ionic-native';

import{TabsPage}from'../pages/tabs/tabs';

import{SettingsPage}from'../pages/settings/settings';

import{AccountPage}from'../pages/account/account';

@Component({

templateUrl:'app.html'

})

exportclassMyApp{

@ViewChild(Nav)nav:Nav;

rootPage=TabsPage;

pages:Array<{title:string,component:any}>;

constructor(publicplatform:Platform){

this.initializeApp();

// used for an example of ngFor and navigation

this.pages=[

{title:'Homepage',component:TabsPage},

{title:'Settings',component:SettingsPage},

{title:'Account',component:AccountPage}

];

}

openPage(page){

// Reset the content nav to have just this page

// we wouldn't want the back button to show in this scenario

this.nav.setRoot(page.component);

}

initializeApp(){

this.platform.ready().then(()=>{

// Okay, so the platform is ready and our plugins are available.

// Here you can do any higher level native things you might need.

StatusBar.styleDefault();

Splashscreen.hide();

});

}

}

I’m sure the app.component.ts pretty makes sense out of the box; I didn’t need to add more explanations.

Now it is time to generate our tabs pages. And that’s the fun part because it is the laziest part. Run the command below in the SidemenuTabs project root.

1

ionic generate page Home

Do same for contact and about pages.

Know that there’s the ionic generate tabs tabName command to generate a page and place under a tab.

Let us see what the home/home.html file will contain. Nothing special, just the autogenerated content, with a slight addition especially to the .html file

1

2

3

4

5

6

7

8

<ion-header>

<ion-navbar>

<ion-title>Home</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

</ion-content>

The autogenerated .ts file should be fine for our needs as it points to the .html file appropriately, and doesn’t do anything.

Remember we had imported all the home, about, and contact pages in our tabs/tabs.ts already. So we’re good to go.

Who did you give the ignition key of the Hadron Collider to? It is much needed now. Enter the root directory of the SidemenuTabs project, and run

1

ionic serve-l

The -l or --labs is for fun. If all went well, you should see something like this:

The -labs is a pretty neat option to Ionic 2 (available in ionic too?), and ever since I knew of it, use it very often. Simulates iOS and Android side by side. For the Linux distros who can’t build iOS app, at least, the Labs will offer the opportunity to get a better understanding of how their app will fare on other platforms.

Updated Oct 19 21:58 GMT: So Ionic 2 Final release candidates was released recently, and the adrenaline rush to get things building is high. Although late to the party, Ionic 2 Side Menu and Tabs repository has been updated to reflect how to create Side Menu and Tabs using the latest of Ionic 2. See the package.json file to learn the exact dependencies used.