Replace back button with menu if no page to go back - Ionic

0
votes

I'm developing an ionic app on android. I'm facing a problem where back button doesn't show up when there's no page to go back.

For more detailed explanation:
Scenario 1: Button from side menu when click go to View B.
Scenario 2: Button from side menu to View A, then button from View A to View B.

Scenario 2 View B shows back button, since it has a previous page, but Scenario 1 doesn't have a previous page that's why it doesn't show the back button, How do I display the menu button if there's no back button?

Here's my code below:

<ion-view view-title="MY View">
    <ion-nav-bar>
        <ion-nav-back-button></ion-nav-back-button>
        <ion-nav-buttons side="right">
        <button class="button" type="submit" 
        ng-click="goEdit(data.ID)">Edit</button>
        </ion-nav-buttons>
    </ion-nav-bar>

    <ion-content class="has-header">

    </ion-content>
</ion-view>

Additional Info:

When removing the <ion-nav-bar> it displays the menu button, but of course will no longer show back button and edit button. When I try putting ng-hide in <ion-nav-bar ng-hide="isMenu"> it doesn't show any nav-bar since it's hidden but from html inspect element it's still there but hidden only. Any work around on this?

2
ionic-framework

2 Answers

1
votes

If you set a page as a rootPage and also use menu in you will see menu button. when navigating to another page from root if you use navCtrl.push() back button will automatically be added to the pushed view.if you set second page as a rootPage again you will see menu button again. But if you want to implement it yourself that is another thing. also check this link

-1
votes

Consider customizing the navbar/toolbar only for the pages that needs it.

By having an ion-toolbar in the ion-header, it appears on top of the default ion-navbar. So it is a workaround to have a custom header bar with my close icon and my custom function gotoHome(). That's the best way i found to customize the 'navbar' for a particular page.

<ion-header>

    <ion-toolbar>
        <ion-buttons left>
            <button ion-button icon-only (click)="gotoHome()">
                <ion-icon name="close"></ion-icon>
            </button>
        </ion-buttons>
        <ion-title>Title</ion-title>
    </ion-toolbar>

</ion-header>

<ion-content padding>
    ...
</ion-content>

The same answer applies to this topic, for reference : Ionic Change back button icon for one page only