Ionic 3 Dynamic Side Menu Example

Most of the web apps contain side menu or navigation drawer as the main menu and needs the content or items to be dynamic.

This tutorial describes setting up dynamic items or content in the side menu using Ionic 3. In this tutorial I'm using ionic sidemenu starter project refer my previous blog for creating ionic sidemenu starter project.

Let's get started...

To set up dynamic items or content for side menu we can use Ionic Events as I'm using in this example. Ionic events is a publish-subscribe style event system for sending and responding to application-level events across the app.

In this example, I'm considering a dummy login and logout functionality ie., when the user logs in and logs out the items or content of the side menu will be changed.

To begin let's first import Events in app.componenent.ts.

app,component.ts

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { LoginPage } from '../pages/login/login';
import { LogoutPage } from '../pages/logout/logout';
import { RegisterPage } from '../pages/register/register';
import { ContactusPage } from '../pages/contactus/contactus';
import { FeedbackPage } from '../pages/feedback/feedback';
import { MyAccountPage } from '../pages/my-account/my-account';
import { DashboardPage } from '../pages/dashboard/dashboard';

import { Events } from 'ionic-angular';



@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = LoginPage;

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

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, events:Events) {
    this.initializeApp();

    // used for an example of ngFor and navigation
     this.pages = [
                    {title:'Login', component: LoginPage},
                    {title:'Register', component: RegisterPage},
                    {title:'Contact Us', component: ContactusPage}
                    ];

  }

  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.
      this.statusBar.styleDefault();
      this.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);
  }
}

After importing Events we've to create two subscribe events, one after user logging in and one after logging out. In these two events, we can set pages or items to be displayed in the side menu.

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { LoginPage } from '../pages/login/login';
import { LogoutPage } from '../pages/logout/logout';
import { RegisterPage } from '../pages/register/register';
import { ContactusPage } from '../pages/contactus/contactus';
import { FeedbackPage } from '../pages/feedback/feedback';
import { MyAccountPage } from '../pages/my-account/my-account';
import { DashboardPage } from '../pages/dashboard/dashboard';

import { Events } from 'ionic-angular';



@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = LoginPage;

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

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, events:Events) {
    this.initializeApp();

    // used for an example of ngFor and navigation
     this.pages = [
                    {title:'Login', component: LoginPage},
                    {title:'Register', component: RegisterPage},
                    {title:'Contact Us', component: ContactusPage}
                    ];

     events.subscribe('user:loggedin',()=>{
      this.pages = [
                    {title:'Dashboard', component: DashboardPage},
                    {title:'My Account', component: MyAccountPage},
                    {title:'Give Feedback', component: FeedbackPage},
                    {title:'Logout', component: LogoutPage}
                    ];
    });

      events.subscribe('user:loggedout',()=>{
      this.pages = [
                    {title:'Login', component: LoginPage},
                    {title:'Register', component: RegisterPage},
                    {title:'Contact Us', component: ContactusPage}
                    ];
    });

    

  }

  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.
      this.statusBar.styleDefault();
      this.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);
  }
}

Once the events are created, we can publish these events from the login page and the logout page.

login.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Events } from 'ionic-angular';


import { DashboardPage } from '../dashboard/dashboard';

/**
 * Generated class for the LoginPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  constructor(public navCtrl: NavController, public navParams: NavParams,public events:Events) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  login(){
       //on success

  this.events.publish('user:loggedin');
  this.navCtrl.setRoot(DashboardPage);
  }


}

login.html

<!--
  Generated template for the LoginPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>login</ion-title>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>

</ion-header>


<ion-content padding>

<ion-item>
<ion-label floating color="primary">username</ion-label>
<ion-input type="text"></ion-input>
</ion-item>

<ion-item>
<ion-label floating color="primary">password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>

<button ion-button block (click)="login()">Login</button>

</ion-content>

In the login page, we've to import & inject Events, after importing, we need to publish the 'user:loggedin' event which is declared in the app.component.ts to update or change the menu items.

logout.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { Events } from 'ionic-angular'; 

/**
 * Generated class for the LogoutPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-logout',
  templateUrl: 'logout.html',
})
export class LogoutPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, events:Events) {
  events.publish('user:loggedout');
  navCtrl.setRoot(LoginPage);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LogoutPage');
  }

}

While user is logging out, we have to publish 'user:loggedout' event. Once logged out menu content will be changed again.

Screenshots

Here is the video tutorial

:) Thanks for visiting this blog, if you have any questions please comment in the comment box below. If you like this blog please don't forget to like, follow & share this blog. Subscribe to my YouTube channel for more updates.

Kinns Tech

Facebook:  /kinnstech

Twitter:      /KinnsTech

YouTube:   Kinns Tech