sidemenu
Ionic

A Side menu app in Ionic 2

    Hey friends, I am back with my article. Today, we will see Side Menu app in more detail and see what all we can do with it. So, let us first take an overview of what we will be going to do today:

  •   Give different icons to each page.
  •   Change the root page.
  •   Merge two kinds of app that is a Blank and Side Menu app.

  I know that you are thinking that it’s a very big article, but don’t take stress. I assure you that you will enjoy reading it. So let’s get started.

  Note: If you want to know how to create a side menu app, you can read it here. To know how to create pages you can check it here

  I) Icons to each page:

        Now, Let start with giving icons to the pages:

    1. Open a command prompt and go to your project folder. In our case it is demo1. So your path must be D:\project\demo1.
    2. Open your code in Visual Studio Code, and open your folder demo1  in it.
    3. Now, open app.component.ts and add icon:string in below line as shown:
pages: Array{title: string, component: any,icon:string}

and add icon: ‘icon name’ in below lines as shown:

 this.pages = [
    {title:'Page One',component:Page1,icon:'information-circle'},                           
    { title:'Page Two', component:Page2 ,icon:'paper' },];

Note: Information-circle and paper are icon names, you can put icons of your choice. To see which icons are available, you can check it on Ionicons docs. By clicking on the icon you can get the name of the icon.

       Your app.component.ts file must look like as shown below:

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

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

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

import { Page1 } from '../page1/page1';

import { Page2 } from '../page2/page2';

@Component({

  selector: 'page-menu',

  templateUrl: 'menu.html'

})

export class MenuPage {

  @ViewChild(Nav) nav: Nav;

  rootPage: any = Page1;

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

  constructor(public platform: Platform, public navCtrl:NavController) {

    this.initialization();

    // used for an example of ngFor and navigation

    this.pages = [

      { title: 'Page One', component: Page1, icon:'information-circle'},

      { title: 'Page Two', component: Page2, icon:'paper'},

    ];

  }

  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();

    });

  }

  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);

  }

}

4. Open your app.html file and modify below line under <ion-content> as below:

<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
         <ion-icon name={{p.icon}}></ion-icon>{{p.title}}</button>

   Now to see what above lines say,  just compare above code with an array in c/c++ code

for(i=0;i,i<n;i++)
{
          cin>>ar[i];
}

Here,
*ngFor
is used in place of for keyword in for loop.

      •   *ngFor=”let p of pages” (click)=”openPage(p)”
      • let p of pages → is same as ar[i]

where, p is used for each single page in array of pages and pages is the name of the  array.

      • (click)=”openPage(p)” → click event is fired on each page to open the respective page.
      •  <ion-icon name={{p.icon}}></ion-icon>{{p.title}}

Basic syntax for icons is <ion-icon name=”<name of icon>”></ion-icon>.Now, in place of <name of icon>, name of the icon must come (which we have put in app.component.ts file in line { title: ‘Page One’, component: Page1, icon: ‘information-circle‘},). Since the this.pages in app.component.ts file is an array pages and p is used for each single page, thus p will be used to display its title and icon name.

Hence, {{p.icon}} and {{p.title}} is used.

Finally, your app.html  file must now looks like this:

     <ion-menu [content]="content">

  <ion-header>

    <ion-toolbar>

     <ion-title>Menu</ion-title>

    </ion-toolbar>

  </ion-header>

  <ion-content>

    <ion-list>

      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">

        <ion-icon name={{p.icon}}>{{p.title}}</ion-icon>

      </button>

    </ion-list>

 </ion-content>

  <ion-footer>

   <button ion-button block (click)="logout()">Logout</button>

  </ion-footer>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

and your side menu must look like  below:

                    icons

II) Change root page:
It’s a single line task, just change the root page value under the export class  in app.component.ts file as below:

                                                    rootPage: any = Page2;

III) Merging two apps:
As discussed above, we will be going to merge two kinds of apps: Blank and Side Menu. For this, Our first page would be blank and remaining pages will have a side menu.
Follow the steps to start working:

  • Create a blank app by typing ionic start dummy startmenu –v2. You can know more about creating apps by following this link.
  • Create a page (say login), put your code there and make your login page as your root page.
  • Now, as you know tasks like adding new pages, changing  root page are all done in app.component.ts and app.html page and each app will have exactly 1 app.component.ts and app.html  page. But, in our case, since we are merging two kinds of apps(blank and side menu), therefore, we will have 2 app.component.ts and app.module.ts pages– one for 1st login page and another for side menu. Now, create a new page (say menu)  which will act as app.component.ts and app.html page for side menu.
  • Copy app.component.ts code in menu.ts page and app.html code in menu.html page and change the root page to page 1 in menu.ts page. Page 1 will be displayed as soon as you will click on login button on login page (in our case).
  • Import this menu page in app.module.ts page.

   Finally your menu.ts page must be look like:

     

import { Component, ViewChild } from '@angular/core';
     import { Nav, Platform,NavController } from 'ionic-angular'; 
     import { StatusBar, Splashscreen } from 'ionic-native';
     import { LoginPage} from '../login/login'; 
     import { Page1 } from '../page1/page1';
     import { Page2 } from '../page2/page2';
     @Component({ selector: 'page-menu',  templateUrl: 'menu.html'})
     export class MenuPage { 
         @ViewChild(Nav) nav: Nav;
         rootPage: any = Page1;  
         pages: Array<{title: string, component: any,icon:string}>
  
         constructor(public platform: Platform, public navCtrl:NavController) 
          {
              this.initializeApp();
            // used for an example of ngFor and navigation      
              this.pages = [
                      { title: 'Page One', component: Page1,icon:'information-circle'},       
                      { title: 'Page Two', component: Page2 ,icon:'paper'},];  
           }
          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();   
           });  
        }
        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);  } 
      
       logout() {   
              this.navCtrl.push(LoginPage); 
              this.navCtrl.setRoot(LoginPage);
         }
     }

Menu.html page:

ion-menu [content]="content"&gt
 <ion-header> 
 <ion-toolbar color="primary">
 <ion-title>Menu</ion-title>
</ion-toolbar>  
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">        
<ion-icon name={{p.icon}}>{{p.title}}</ion-icon>    
</button>
</ion-list>
</ion-content>
<ion-footer>
<button ion-button block (click)="logout()">
Logout</button>
</ion-footer>
</ion-menu><
!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus --><ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

app.component.ts page:

import { Component } from '@angular/core';
import { Platform  } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { LoginPage} from '../pages/login/login';  
@Component({
   template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class MyApp 
{
   rootPage: any = LoginPage;
   constructor(public platform: Platform) 
   {
     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();
    }); 
} 
}

App.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import { LoginPage } from '../pages/login/login';
import { MenuPage } from '../pages/menu/menu';
import { ForgetPage } from '../pages/forget/forget';
@NgModule({
   declarations: [
       MyApp,
       Page1,
       Page2,
       LoginPage,
       MenuPage,
       ForgetPage
   ],
   imports: [
       IonicModule.forRoot(MyApp) 
   ],
   bootstrap: [IonicApp],
    entryComponents: [
           MyApp,
           Page1,
           Page2,
           LoginPage,
           MenuPage,
          ForgetPage
    ],
    providers: []
 })
export class AppModule {}

App.html

 <ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}</button>
</ion-list>
</ion-content>
</ion-menu><

!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false">
</ion-nav>

Ufff!…Finally, we are done with this side menu application. Hope you have understood it. If not, then start reading it again. Hehe..

I will be back with my next article on Alerts very soon. So, stay tuned. BBye!

A Side menu app in Ionic 2

Most Popular

Have a Great startup Idea and want to make it possible? Looking for an extraordinary team to build a mobile or Web app for your idea to come into reality? Then you are at right place. I provide my services for mobile and web app development.

Copyright © 2019 CrocoCode. All rights reserved.

To Top