Why is the ion-back-button not shown?

Question

The ion-back-button does NOT show up to the right of the ion-menu-button. Why is that?

the ion-menu-button and the ion-title show properly and aligned on the same horizantal position.

<ion-header>
  <ion-toolbar>

    <ion-buttons slot="start">
      <!-- navigation button-->
      <ion-menu-button></ion-menu-button>
      <!-- optional back button-->
      <ion-back-button></ion-back-button> 
    </ion-buttons>

    <ion-title>
        {{ pageTitle | translate}}
    </ion-title>

  </ion-toolbar>
</ion-header>

In the DOM inspector the CSS display attribute of the ion-back-button is set to none. Why would it set itself to none?

I used

this.navCtrl.navigateForward('/term/' + term);

to navigate to this page, thus I expect the back button to pick this up. Why is navigateForward not adding to the stack, which would make the ion-back-button show?

Answer 1

TL;DR Replace <ion-router-outlet></ion-router-outlet> with <ion-nav></ion-nav>.

I had the same problem and helped myself by adding a default-href to each back-button, but in the end this turned out to be a bad workaround that didn't solve the underlying problem. The main reason I was unhappy with the solution was, that the back-button was not "smart". It always returned to the default-href and not to the previously active view.

I finally found out, that the reason for the problem was not the back-button itself, but that I had copied the wrong routing-setup from the official documentation:

<ion-router>
  <ion-route url="/" component="page-one"></ion-route>
  <ion-route url="/page-two" component="page-two"></ion-route>
</ion-router>

<ion-router-outlet></ion-router-outlet>

While there is nothing wrong with this setup per se, it fails if you want to use <ion-back-button>. The reason for this is, that <ion-router-outlet> does not provide a navigation stack, which is required for the back-button to work.

Fortunately <ion-nav> provides a navigation stack and is compatible with <ion-router>, so the setup can be changed easily:

<ion-router>
  <ion-route url="/" component="page-one"></ion-route>
  <ion-route url="/page-two" component="page-two"></ion-route>
</ion-router>

<ion-nav></ion-nav>

After this change my back-buttons were visible and worked as expected.

Answer 2

I've figured out after spending far too much time on the issue that there is another scenario in which the ion-back-button won't show even after trying every answer here.

OP mentions in a comment that their back button is in a custom component app-header. If app-header contains an ion-header, the ion-back-button never shows. ion-header MUST be part of the html of the page itself, not a component within this page.

For instance:

<!-- tabs/tab1/child1.page.html -->
<app-header></app-header>


<!-- header.component.html -->
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

will not work and the back button won't show, however

<!-- tabs/tab1/child1.page.html -->
<ion-header>
  <app-header-toolbar></app-header-toolbar>
</ion-header>

<!-- header-toolbar.component.html -->
<ion-toolbar>
  <ion-buttons slot="start">
    <ion-back-button></ion-back-button>
  </ion-buttons>
</ion-toolbar>

will work as expected.

So the real culprit here is not really ion-back-button but ion-header, which does not work as expected when placed in a child component.

Answer 3

Make sure you arrived to that page via a router link that modifies the route history. Otherwise the backbutton wont show because there is no recorded history of a previous route.

My issue was, the link i clicked which takes me to a page forward, had routerDirection="none". So there was no previous route so my back button didn't show.

Changing

<IonRouterLink routerDirection="none" routerLink={`/item/${item.id}`}>...</IonRouterLink>

To

<IonRouterLink routerDirection="forward" routerLink={`/item/${item.id}`}>...

fixed my issue.

Answer 4

So Ionic developers make life complicated, now (Ionic5) the attribute is called default-href and not defaultHref.

But still when clicking not loading to the href.

Answer 5

For anyone who has this trouble, and the ion-back-button is still not appearing, check that you have the IonicModule imported in your page's module. It happened to me that I created a component for the ion-header and the ion-back-button was not appearing. It was because my ComponentsModule (the one that declares and exports all my components) had only the CommonsModule imported and not the IonicModule. So always check for the IonicModule in your imports. Otherwise the back button will not appear

Answer 6

It will not visible if there will be no previous overlay/page to show

So you can set css

ion-back-button {
   display: block;
}

Then add click event on element

<ion-back-button (click)="close()">
    <ion-icon name="close"></ion-icon>
</ion-back-button>

Add on .ts file

click() {
  this.modalCtrl.dismiss();
}

Answer 7

Just need to add the color in scss file to show up.

ion-back-button{
  --color: black;
}

And also don't forget to indicate the href, adding it html file

<ion-buttons slot="start">
    <ion-back-button defaultHref="YourRouteHere"></ion-back-button>
</ion-buttons>

Answer 8

Workaround. I programmatically decide with the URI path. Drawback, if more detail pages are added to the app, they need to be added (e.g. in an array of back-button-qualifying paths).

<ion-button *ngIf="router.url.includes('/term/')"><ion-icon name="arrow-back"></ion-icon></ion-button>

Added the Router Object to the constructor of this component

constructor(public router: Router) { }

If someone still comes up with why the programmatic navigation does NOT add to the navigation stack - so that the back button would appear on the detail page - I gladly listen.

Answer 9

If there is no page in Stack then

<ion-back-button></ion-back-button>

will not show. If you want to show then You need to be added a specific page in "defaultHref" Attribute.

<ion-back-button defaultHref="logout"></ion-back-button>

you need to be learned from here

https://ionicframework.com/docs/api/back-button

Answer 10

Is it root page? if so ion-back-button will not show up.

Try adding the attribute defaultHref. For example: <ion-back-button defaultHref="home"></ion-back-button>. it should show up regardless of having no navigation stack.