Nav.push not working correctly inside app.component

Ionic Framework ionic-v3
1

Hi all,

I’m using the sidemenu --v2 template as the basis for my app which has the sidemenu inside the app.component not the home page. This is how I want it but i’m not able to push pages ontop of that with the auto made back button.

Here is the method I’m using, inside app.component.ts

  pushPage(page) {
    this.nav.push(page).then(response => {
        console.log(response);
    }).catch(e => {
        console.log(e);
    });
  }

And this is the button inside app.html to call it

  <ion-content>
    <ion-list>
      <!--THIS IS THE OLD TEMPALTE CODE-->
      <!--<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">-->
      <!--  {{p.title}}-->
      <!--</button>-->
      
      <button menuClose ion-item (click)="pushPage(ListPage)">List Page
      </button>
      
    </ion-list>
  </ion-content>

The console I get is. . (and nothing happens)

invalid views to insert

EDIT: I have a home page which I would like to push pages ontop of, like the list page, and then for it to return back to the home page using the back button.

2

what exactly do you want to do?

3

To push the list page on the nav stack and have the back button automatically show up in the menu bar. At the moment it the link does nothing.

4

Have you declared ListPage in your class?

5

Yep and in entry components.
Thanks

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { GoogleMaps } from '@ionic-native/google-maps';

import { Pin } from '../components/pin/pin';
import { LocationButton } from '../components/location-button/location-button';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    Pin,
    LocationButton

  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Geolocation,
    GoogleMaps
  ]
})
export class AppModule {}

PS. I can link to the list page using the old template code, commented above, but its not using nav.push - which I need to get the back button to work.

6

Sorry, I mean have you declared it in app.component.ts?

You’ll have to declare a reference to the page, e.g.
public listPage = ListPage;

And then refer to that in your template, e.g.
(click)="pushPage(listPage)

7

Okay here’s my updated 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';

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

  rootPage: any = HomePage;
  public listPage = ListPage;

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

  }

  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();
    });
  }
  
  pushPage(page) {
    this.nav.push(page).then(response => {
        console.log(response);
    }).catch(e => {
        console.log(e);
    });
  }
  
}

And app.html

<ion-menu type="overlay" [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
     
      <button menuClose ion-item (click)="pushPage(listPage)">List Page
      </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="true"></ion-nav>

It now opens up the list page! But the back button is not working. Is this because of pushing on the root page?