ionic-frameworkangular-routingionic7

ion-back-button not showing on Android device in Ionic 7 but works in the browser


I'm wondering why the ion-back-button is not being displayed in my Ionic 7 app on an Android device, although it works fine in the browser. I've checked the structure of my pages, tabs and routing files and can't find any reason for this. I navigate from my home.page to my tabs.page which has children a, b and c.

Here my codes for the understanding: a.page.html, b.page.html, c.page.html (Tabs) => ion-back-button is not displayed in the toolbar

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>Gruppe</ion-title>
  </ion-toolbar>
</ion-header>

tabs.page.html

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="a">
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="b">
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="c">
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

app.routes.ts

export const routes: Routes = [
  {
    path: 'home',
    component: HomePage,
  },
  {
    path: 'tabs/:id',
    component: TabsPage,
    children: [
      {
        path: 'a',
        component: APage,
      },
      {
        path: 'b',
        component: BPage
      },
      {
        path: 'c',
        component: CPage
      },
      {
        path: "",
        redirectTo: 'a',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: "",
    redirectTo: 'home',
    pathMatch: 'full',
  }

Solved it by simply using a regular button with a routerLink="/home" in my toolbar. The ion-back-button gets hidden by Ionic on that page


Solution

  • Solution:

    <ion-header>
      <ion-toolbar color="primary">
        <ion-buttons class="btns" slot="start">
          <ion-button (click)="goHome()" class="btn">
            <ion-icon class="ico" name="chevron-back"></ion-icon>
            <p class="backText">Back</p>
          </ion-button>
        </ion-buttons>
        <ion-title>Gruppe</ion-title>
      </ion-toolbar>
    </ion-header>
    

    And the styling to make the button look like an ios back button:

        .btns{
        padding-left: 0px;
        margin-left: -8px;
        .btn{
            padding-left: 0px;
            margin-left: 0px;
            text-transform: none;
    
        }
    
    }
    .backText{
        padding-left: 1px;
        margin: 0px;
        font-size: 17px;
        letter-spacing: normal;
    }
    
    .ico{
        font-size: 27px;
        padding-bottom: 1px;
    }
    

    typescript:

    goHome(){
        this.navCtrl.navigateBack('/home');
      }