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

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