Auto generated back button not working

Ionic Framework ionic-v3
1

Hi all,

I’m struggling to get simple navigation working on my app which started with the sidemenu --v2 template.
I have a home page and a list page and I’m trying to navigate to list page using the sidemenu, which is in the app component.

app.component.ts

import { Component, ViewChild, } from '@angular/core';
import { 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('myNav') nav
  rootPage: any = HomePage;

  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();
    });
  }

  openList() {
    this.nav.push(ListPage);
  }
}

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 ion-item menuClose (click)="openList()">
        List
      </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 #myNav [root]="rootPage" #content swipeBackEnabled="true"></ion-nav>

List page is essentially default as comes in the starter template.

I’ve followed the documentation but the list page opens and the auto generated back button does not do anything.

image
listPage.png510×785 11.4 KB

2

What does your ListPage template look like?

3

Yup it’s . .

<ion-header>
  <ion-navbar>
    <ion-title>List</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
      <ion-icon [name]="item.icon" item-left></ion-icon>
      {{item.title}}
      <div class="item-note" item-right>
        {{item.note}}
      </div>
    </button>
  </ion-list>
  <div *ngIf="selectedItem" padding>
    You navigated here from <b>{{selectedItem.title}}</b>
  </div>
</ion-content>
4

Does it work if you change your ion-header to:

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

    <ion-title>List</ion-title>
  </ion-navbar>
</ion-header>
5

Hi,

In my code I actually just commented it out, but tried with/without it still does the exact same.