I am new to Ionic 2 and I was developing a side menu for my app.Now in most of the examples online they have used tabs and assigned that menu on the tab.But I am not using tabs therefore the side menu is working on my home page only.
Below is the code I did:
app.html
<ion-menu [content]="nav">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item icon-left (click)="onLoad(homePage)"><ion-icon name="log-in"></ion-icon>Sign In</button>
<button ion-item icon-left (click)="onLoad(signUpPage)"><ion-icon name="person"></ion-icon>Sign Up</button>
<button ion-item icon-left (click)="signOut()"><ion-icon name="log-out"></ion-icon>Sign Out</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #nav></ion-nav>'
app.component.ts
import {Component, ViewChild} from '@angular/core';
import {MenuController, 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 {SignupPage} from "../pages/signup/signup";
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = HomePage;
homePage=HomePage;
signUpPage=SignupPage;
@ViewChild(Nav) nav: Nav;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,private menuCtrl:MenuController) {
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();
});
}
onLoad(page:any){
this.nav.setRoot(page);
this.menuCtrl.close();
}
signOut(){
}
}
And now in my html(it is working in home.html but not elsewhere)
<ion-header>
<ion-navbar>
<ion-title>Choice</ion-title>
<ion-buttons start>
<button ion-button icon-only menuToggle>
<ion-icon name="menu" color="danger"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>