Remove back button

Ionic Framework ionic-v3
1

How can i remove the back button from my pages?
I tried that config: { backButtonText: '' } but it only hides, if the user still clicks in the place where the back button is, it is activated.
Or is there a way i can change the ionic default back button to an icon?

Thanks

2

You tried this?

<ion-navbar hideBackButton *navbar>< /ion-navbar>

Or please refer to:

21 Likes
3

@zhouhaowowtv thanks man, it worked.

4

This removes back button but it also removes menu button. Is there any way to show menu button, but remove back button with following code?

this.navCtrl.push(page)

Thanks

1 Like
5

To me, the back button is part of the entire point of using push. Can you achieve what you want using setRoot instead?

6 Likes
6

you are indeed correct, setRoot is the way it should be done

7

It’s work for me but it’ll also hide the menu bar also can u please tell me any solution

8

What about cases with Tabs? If I set the root page to the “Home Page”, my tabs aren’t shown after login. If I set the root to “Tabs page” then the back button shows. Any suggestions how to reset the root page in this case?

9

@VivekDesigner try this code

 > <ion-header>
    >   <ion-navbar hideBackButton >
    >     <ion-title>Session</ion-title>
    >   </ion-navbar>
    > </ion-header>
12 Likes
10

Thanks it’s working fine

11

@VivekDesigner how on earth did you manage?! I’ve tried a lot of stuff, and the back button is still there…

12

are you using “push” for navigation?

13

Right now I’m using setRoot.

14

It’ll work fine man.
If you are using push only that back button will come.
Is it possible means you can show ur html and ts code, Then it’ll help me to find the problem

1 Like
15

Thanks finally found a solution. Such a simple bit of code, so much time wasted trying to do a workaround lol! THUMBS UP!!

1 Like
16

Works fine with ionic 2.

17

/* CSS /
[show]{
display: block !important;
}
/ ion- nav /
/

<ion-navbar class="white_bg" hideBackButton>
    <ion-butto*/ns start left>
        <button ion-button show menuToggle>
            <i class="menu_icon"><span></span></i>
        </button>
    </ion-buttons>
    <ion-title>title</ion-title>
</ion-navbar>

*/

try this it’s work for me
[/quote]

try this it’s work for me

2 Likes
18

To do not remove the menu icon use this css code in your app.scss

ion-navbar[hidebackbutton] button[menutoggle] {
  display: block !important;
}
2 Likes
19

hideBackButton="true"

use this inside your ion-navbar

20

Use setRoot instead of push if you want to remove back button and keep menu bar. For example:

 public gotoAbout() {
     this.navCtrl.setRoot(AboutPage);
   }

I did this and it worked. :slight_smile:

5 Likes