Back button in the header not working

Ionic Framework ionic-v3
1

Hi,

It seems I cannot implement the back button in the header. Say I have the following in the header of page-2

<ion-toolbar>
	<ion-buttons slot="start">
		<ion-back-button text="Back"></ion-back-button>
	</ion-buttons>
	<ion-title>
	 	Select your time
	</ion-title>
</ion-toolbar>

I navigate to page-2 from page-1 using a button click handler…

this.navController.goForward("/page-2")

But I don’t see the back button in the header of page-2… Am I missing anything?

1 Like
2

I think you must use ion-navbar instead of ion-toolbar:

<ion-navbar>	
	<ion-title>
	 	Select your time
	</ion-title>
</ion-navbar>
3

Forgot to mention… this is in ionic 4 and there is no Navbar anymore… But anyways, it is fixed. I did a childish mistake… While making changes, it reloads the page, so the router stack is cleared and thus the back button was not appearing… When I started from the main page it worked as expected…

4

In your toolbar, add hideBackButton, this will make the follow button be the only button in toolbar.

  <ion-buttons left>
        <button ion-button icon-only (click)="pop()">
            <ion-icon name="arrow-back"></ion-icon>
        </button>
    </ion-buttons>

IN .TS

pop(){
    this.navCtrl.setRoot('NamePage');
}

It is better to do it with set root to avoid pushed pages or that stuff.

5

Hi,

I needed a go-back, not go-to-root… Anyways, as I said, it was my mistake…

ion-back-button works well.

6

OK.
I thought you were talking about Ionic 3.