Ionic 2 Side Menu With Tabs

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this tutorial, I will show you how to create Ionic 2 Side Menu with Tabs. As you might know, Ionic 2 comes with three templates out of the box that you can use in your project, namely blank,sidemenu and tabs. In this tutorial, we will start off with the black template and combine the sidemenu and tabs template in it. Starting off with the black template will give you an idea about how things work, that will be helpful should you need to make changes to the finished combination.

A disclaimer that I want to put out is that most of the code that I will be using in this tutorial is taken from the sidemenu and tabs template that ionic has.

 

Step 1)

As I mentioned we will start off with the blank template so open up your command prompt/Terminal and run the following command.

Here we are naming our project sidemenuTabs and then we have navigated inside of it as well.

Step 2)

Open up src\app\app.component.ts and code it as follows

Let’s understand what is happening here.

First, we are pointing to the TabsPage, we will create the page later in the tutorial.

Also, we have a list of pages that will show up in the side menu

Step 3)

We will now code the app.html file. So open up src\app\app.html and put the following code in it.

Here we are showing the list of pages using *ngFor. Also, a thing to note is that all the pages will be shown within the ion-nav tag.

Step 4)

Now it’s time to create some pages. As shown in the code till now we have used two pages, namely TabsPage and OtherPage. Ionic provides a greater way to create pages using the command line. Make sure you are inside the project folder, now run the following commands.

The above command g stands for generate, it will generate page component with the names TabsPage and OtherPage respectively. You can read more about the generate command here.

While we are here let’s create some pages that we will need later on as well we do that by issuing the following commands

All in all, we have now 5 pages, about, contact, home, other, tabs. The home page was created by default with the blank template.

Step 5)

Until now the code that we have written has only created a sidemenu along with some pages. Now, it’s time to merge the tabs template as well. So open up src\page\tabs\tabs.ts and code it as follows

Step 6)

Now, it’s time to code the view for the tabs component. Open up src\page\tabs\tabs.html and code it as follows.

Step 7)

For the rest of the pages, we will just put simple placeholder code that will let us know the difference between pages. To do that we will add the same code in all of the pages but just change the heading title for each page accordingly. So for the contact page open up src\pages\contact\contact.html and code it as follows

We will do the same for home, about and other page. Just replace the <ion-title>Contact Page</ion-title> with the respective title.

Step 8)

We created all the page components but Angular 2 will not about it unless they are declared in @NgModule. To do that open up src\app\app.module.ts and code it as follows.

Here we have added all the pages to the declarations array as well as the entryComponents array.

 

Somethings to keep in mind are that we have created the tabs component inside the side menu. This means that the entire tabs component will appear as one page inside the side menu template in the ion-nav tag. The pages that are loaded inside the tabs component will be loaded in theion-tab tag.

 

Conclusion

In my opinion, the combination of Side Menu and Tabs template should be a template that comes out of the box with ionic. But as you just saw it is not too complex to make it yourself. A thing to keep in mind is that once you have such a nested template handling the backbutton requires special attention, as the user might want to go back the previous tab but might end up going back one page.

If you want to get started right away, you can create a fresh ionic project with the following command to get the sidemenuTabs template.

Or you can download the code from below.

Download Code:


Code Will Be Sent Via Email

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

  • sandeep B

    In 2nd step you have mentioned “srcappapp.component.html” but It should be “srcappapp.component.ts”

    • Hey sandeep,
      Thanks for spotting the mistake, it has been corrected.

      -Prantik

%d bloggers like this: