ion-back-button is not showing up in toolbar in Ionic 5

user_7266205 0
Viewed 3963

I'm trying to show a back button in the toolbar of one page. Below is excerpt of my code.

  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button [text]="" [icon]="arrow-back"> </ion-back-button>
    </ion-buttons>
    <ion-title>
      About
    </ion-title>
  </ion-toolbar>

If I set the defaultHref attribute, it works but I will not have ability to use my custom back button with text and icon.

  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="home"> </ion-back-button>
    </ion-buttons>
    <ion-title>
      About
    </ion-title>
  </ion-toolbar>

How do I make it work. Could anyone please help?

ionic5 ionic-framework
5 Answers

If you are trying to use a custom header (like me), this is the workaround that I found pretty easy to implement and works like it's supposed to.

/components/custom-header.html

<ion-toolbar>
  <ion-buttons slot="start">
    <ng-content></ng-content>
  </ion-buttons>
  <ion-title>Page title</ion-title>
</ion-toolbar>

And the usage will be like:

/pages/home-page.html

<ion-header>
    <custom-header>
       <ion-back-button></ion-back-button>
    </custom-header>
</ion-header>
user_34106600

This is working in my project ..

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button text=""></ion-back-button>
    </ion-buttons>
    <ion-title>About</ion-title>
  </ion-toolbar>
</ion-header>
user_121682350

There is an open issue on the github page about the fact that ion-back-button won't display in non ion-header containers such as custom components. However, you can work around this with css.

.can-go-back ion-back-button {
    display: block;
}

GitHub issue open since 2019: https://github.com/ionic-team/ionic-framework/issues/17039

user_166089950

I had the same problem as yours, I have managed to remove the <ion-back-button> and made a custom button like this:

<ion-toolbar>
    <ion-buttons slot="start">
        <ion-item lines="none" routerLink="/home">
            <ion-img src='path-to-your.png'></ion-img>
        </ion-item>
        <ion-text>About</ion-text>
    </ion-buttons>
</ion-toolbar>

Then adjust the style. A little bit of work but it's worth it.

user_88464400

i find it works cleaner this way..by using the same ion-button but with an icon inside..its cleaner this way and works just normal..all you need to do is change the route to the previous route

  <ion-buttons slot="start">
    <ion-buttons slot="start" routerLink="/payment">
      <ion-icon name="chevron-back-outline" class="xdsffdd"></ion-icon>
    </ion-buttons>
  </ion-buttons>
user_102244380
Related