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:
<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');
}