I am using ionic 2, with login, side menu , tab menus. So after login user will go to dashboard screen with other 2 menus. So my menus are dashboard, about, contact
. Now the problem is after i login its going to dashboard screen. But no tab and side menu are showing. Don't know where i am doing wrong.
here my code :
Src/app/app.component.ts :
import { Component, ViewChild } from '@angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
export interface PageInterface {
title: string;
component: any;
icon: string;
index?: number;
}
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
// set our app's pages
appPages: PageInterface[] = [
{ title: 'Dashboard', component: TabsPage, icon: 'calendar' },
{ title: 'About', component: TabsPage, index: 1, icon: 'information-circle' },
{ title: 'Contact', component: TabsPage, index: 2, icon: 'contacts' }
];
rootPage:any = HomePage;
constructor(platform: Platform, public menu: MenuController,statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
});
}
openPage(page: PageInterface) {
this.menu.close();
if (page.index) {
this.nav.setRoot(page.component, { tabIndex: page.index });
} else {
this.nav.setRoot(page.component).catch(() => {
console.log("Didn't set nav root");
});
}
}
}
src/app.app.html
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item menuClose *ngFor="let p of appPages" (click)="openPage(p)">
<ion-icon item-left [name]="p.icon"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #content [root]="rootPage"></ion-nav>
src/app/app.mosule.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { SignupnamePage } from '../pages/signupname/signupname';
import { DashboardPage } from '../pages/dashboard/dashboard';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { TabsPage } from '../pages/tabs/tabs';
@NgModule({
declarations: [
MyApp,
HomePage,
LoginPage,
SignupnamePage,
DashboardPage,
AboutPage,
ContactPage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
LoginPage,
SignupnamePage,
DashboardPage,
AboutPage,
ContactPage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
And at last my all menu pages html code are :
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
About
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2> About this template </h2>
<p>This Tabs and Menu template was made by Flink91, find it here: <a href="https://github.com/Flink91/ionic2-tabs-and-menu">https://github.com/Flink91/ionic2-tabs-and-menu</a></p>
<p>My main source was this conference demo from the Ionic team: <a href="https://github.com/driftyco/ionic-conference-app">https://github.com/driftyco/ionic-conference-app</a></p>
</ion-content>
If you want i have attached my source project here : Here
login tap function :
export class LoginPage {
constructor(public modalCtrl: ModalController) {
}
public loginbtnTap() {
let loginModal = this.modalCtrl.create(DashboardPage);
loginModal.present();
}
}