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?

score 46 · Answer 1 · answered Oct 28 '19 at 04:29

46

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

answered Oct 28 '19 at 04:29

Hassan Ali

994
6
22

Yes. The question is focusing why the navigateForward would not add to the stack. (I phrased my question more precise.) – feder Oct 28 '19 at 08:05
then you need router for forward navigation. – Hassan Ali Oct 28 '19 at 09:28
the ionic stack has 2 pages only? when i use with 3 levels deep the backButton is not showing – vinicius gati Feb 02 '21 at 13:18
Ionic mange it self. can you please share your code? – Hassan Ali Feb 03 '21 at 05:29

score 11 · Answer 2 · answered Jun 19 '20 at 14:27

11

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

answered Jun 19 '20 at 14:27

Er. Kathrecha Krushnkumar

199
1
5

what is modalCtrl? – Srinath Kamath Jul 26 '22 at 07:31
@SrinathKamath instance of ModalController from ionic-angular package – Er. Kathrecha Krushnkumar Sep 14 '22 at 10:30

Halen · Answer 3 · 2020-12-09T16:23:09.530

6

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

edited Dec 09 '20 at 16:23

answered Dec 09 '20 at 16:17

Halen

81
1
6

1

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. – Donovan Solms Jan 31 '21 at 20:58

arif08 · Answer 4 · 2019-10-28T04:10:57.620

3

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.

edited Oct 28 '19 at 04:10

answered Oct 28 '19 at 03:51

arif08

746
7
15

1

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? – feder Oct 28 '19 at 08:02
What page is this(the above code you mentioned of)? Is this the root page? Or is this the page you navigate forward to? – arif08 Oct 28 '19 at 08:34
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. – feder Oct 28 '19 at 09:53
1

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. – arif08 Oct 29 '19 at 03:39

score 2 · Answer 5 · answered Aug 09 '21 at 11:06

2

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.

answered Aug 09 '21 at 11:06

Davideas

3,226
2
33
51

feder · Answer 6 · 2019-10-29T11:06:39.883

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.

score 0 · Answer 7 · answered Apr 12 '20 at 01:39

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>

score 0 · Answer 8 · answered Jun 02 '22 at 04:37

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.

score 0 · Answer 9 · answered Aug 23 '23 at 07:28

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.

Why is the ion-back-button not shown?

9 Answers9