Why is the ion-back-button not shown?

user_2815264 0
Viewed 27871

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?

ionic4 angular8 ionic-framework
8 Answers

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

user_71306250

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

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.

user_112841400

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

user_58776560

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.

user_33973450

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.

user_28152640

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>
user_132909300

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.

user_82436980
Related