Ionicv Navigation with Side Menu

Ionic Framework ionic-v3
1

Hello,
Im trying to do an ionic app for my bachelor thesis.
I’m new with Ionic and I have tried to do a side menu with navigation trough the app’s pages.
So I used the side menu template and adapted it to my needs.

It works great with the browser test (ionic serve).
But if i run it on device or simulator the navigation doesn’t work.
Here is my code:

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 { AuthPage } from '../pages/auth/auth';
import { PrincipalPage } from '../pages/principal/principal';
import { SportfilterPage } from '../pages/sportfilter/sportfilter';


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav; Nav;
  rootPage:any = AuthPage;
  pages: Array<{title: string, component: any}>;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    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();
    });
    this.pages = [
      { title: 'Sport\'s Map', component: PrincipalPage },
      { title: 'Sport\'s Filter', component: SportfilterPage },
    ];
  }
    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);
    // i tried this but it doesn't solve the problem
    //this.nav.push(page.component);
  }
}

app.html

<ion-menu [content]="content" [persistent]="true">
  <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" (tap)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

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

app.module


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 { AuthPage } from '../pages/auth/auth';
import { Facebook } from '@ionic-native/facebook';
import { SQLite } from '@ionic-native/sqlite';
import { NativeStorage } from '@ionic-native/native-storage';
import { PrincipalPage } from '../pages/principal/principal';
import { SportfilterPage } from '../pages/sportfilter/sportfilter';





@NgModule({
  declarations: [
    MyApp,
    AuthPage,
    PrincipalPage,
    SportfilterPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AuthPage,
    PrincipalPage,
    SportfilterPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Facebook,
    NativeStorage,
    SQLite
  ]
})
export class AppModule {}

Thanks for your Help!

2

I would assign to rootPage instead of calling setRoot().

3

Thanks for your response i tried this but same result it works great in browser but not in android simulator

   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);
    // i tried this but it doesn't solve the problem
    //this.nav.push(page.component);
    this.rootPage = page.component;
  }
4

Chrome’s developer tools have an option to attach to processes on attached devices. I would look to see if there are any errors logged in console.

5

the nav seems ok with browser.
Didn’t see any error :tired_face:
image

6

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Chrome dev tools: Remote Debug your Ionic App · ionic.zone Look at the console and network tabs for errors.

1 Like
7

ok just understand fully your reponse and found the error!

it was the model that wasn’t instantiate for the *ngfor

thanks a lot