creating side menu navigation in ionic 2

Sidemenu is common and basic part of any type mobile app because which are responsible for navigating from one page to other.

In this tutorial we are using latest version of ionic that is ionic 2. New version of ionic was released with many new features with resolved many bug.

Before We start make sure your ionic is updated with ionic 2. If not then update ionic with following command

Let’s start with creating fresh new ionic 2 blank project called sidemenudemo

Got to project folder

Adding platform

Note that if you have to make ios app then you required mac

After creating ionic project directory structure looks like this.

directory structure in ionic 2

src/pages folder there is home folder by default coming if we are using blank ionic 2 template while creating ionic 2 project.

Creating Page

Now we are creating two page that is About and Contact page using following command

After using this command you can see that there is two folder about and contact each has .ts , .html , .scss files

AppModule

Modules are a great way to organize the application and extend it with capabilities from external libraries.

Every Angular app has a root module class. By convention it’s a class called AppModule in a file named app.module.ts.

Go to app/app.module.ts

The app/app.module.ts are coming with including that default home page.

Adding pages to AppModule

For adding About and Contact pages you have to import the class of that page from specific path to app.module.ts file like this.

Also you have to add that class of page to the declarations and entryComponents of @NgModule

Finally app.module.ts file llooks like this

Creating Menu

The Menu component is a navigation drawer that slides in from the side of the current view. By default, it slides in from the left, but the side can be overridden. The menu will be displayed differently based on the mode

Go to src/app/app.html

In above code we have add sidemenu on the left side.  There is three menu item as Home,About and Contact. when click on any item the corresponding function will fire from app.component.ts. menuClose is use for closing the menu after click on the item.

Go to  src/app/app.component.ts

In above code we have imported ViewChild from a @angular/core. Nav from ionic-angular library for page navigation.

Here HomePage is main page that is root page of the app. After that we have to import contact and about page for navigation .

nav.setRoot() method we are using here for going to another page.

Adding Menu button

Go to src/pages/home/home.html

menuToggle used For displaying menu on click of button. For displaying icon like menu use  <ion-icon name=”menu”></ion-icon>  check more icon Here

Like this you can also add menu button to about & contact page.

Let’s Check app in browser  

 

         

15 Comments

  1. Thank You for this tutorial. If I want display google map’s markers on a map , by click on an item from the side menu , I just do complete the go_to_xxx() function ?

  2. Hello,
    Thanks for the wonderfull and explanation. I have succesfully added the sidemenu but my tabs are no longer displaying and also how do i add the sidemenu to the other pages. Thanks

  3. Hi
    when i am linking blank page with side menu page .. when i am redirecting from blank page to side menu its not displaying toogle bar.how to give link (code ) from blank page to side menu

Leave a Reply