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?

Rachitis

Answer 1

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

Kingwood

Yes. The question is focusing why the navigateForward would not add to the stack. (I phrased my question more precise.) – Rachitis

then you need router for forward navigation. – Kingwood

the ionic stack has 2 pages only? when i use with 3 levels deep the backButton is not showing – Beacon

Ionic mange it self. can you please share your code? – Kingwood

Answer 2

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();
}

Lineate

what is modalCtrl? – Disputatious

@SrinathKamath instance of ModalController from ionic-angular package – Lineate

Answer 3

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

Spalding

I had a similar issue, only for me IonicModule was there, but the component that wasn't showing the back button wasn't in my module declarations. You answer helped me figure this out. – Ascending

Answer 4

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.

Aquarius

Thank you! I was looking for an hour, I was ready to give up:) – Seaware

Answer 5

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.

Holbrooke

defaultHref is of no use here. I only want to show the back button IF someone navigated forward (e.g. into a detail page). I assumed navCtr.navigateForward would add to the navigation stack. Apparently it does not. Any other programmatic way? – Rachitis

What page is this(the above code you mentioned of)? Is this the root page? Or is this the page you navigate forward to? – Holbrooke

It is in my custom component app-header, which is in every single page. Thus in the home page and the detail page. I assume this is possible because the component is looking at the router object. – Rachitis

Do you want any extra behavior other than just navigating Back? If not, then you can use input binding. That way you don't have to update the template each time you add a detail sort of page. – Holbrooke

Answer 6

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.

Steal

Answer 7

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.

Rachitis

Answer 8

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>

Sharlasharleen

Answer 9

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.

Cohen