Auto generated back button not working


#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.


#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.