[solved] Hide <ion-nav-buttons> with ng-hide/ng-show

ionic-v1
1

Hi,

I know it’s possible to hide the back button but how can I hide simple nav-buttons?

I tried this:

<ion-nav-buttons ng-hide="<<condition>>" side="left">
   <button class="..." onclick="doSth();">
   MyButtonLabel
   </button>
</ion-nav-buttons>

The << condition>> works for other html tags, e.g. span-elements, so that’s all right. It just does not hide the < ion-nav-buttons> directive.

Any idea if this is possible at all? Or am I just missing sth?

1 Like
2

It seems like <ion-nav-buttons> is just a way to place the proper dom elements in the right place. It doesn’t act like an element itself. The easiest way to solve this is to place the ng-hide attribute on the button itself (or on a div that surrounds all the buttons).

<ion-nav-buttonsside="left">
   <button ng-hide="<<condition>>"  class="..." onclick="doSth();">
   MyButtonLabel
   </button>
</ion-nav-buttons>
3 Likes
3

Yeah, this works pretty well. Thanks!

4

I’ve tried conditionally hiding and showing elements in ion-nav-buttons element and found it to be laggy. There’s time where both elements are visible making a jarring transition.

<ion-nav-buttons side="left">
   <button ng-hide="activeTab == 'info'">
   MyButtonLabel
   </button>
   <button ng-show="activeTab == 'friends'">
   MyButtonLabel
   </button>
</ion-nav-buttons>

Is there a way to fix this I haven’t thought of? I’ve tried ng-if and ng-switch and the same thing happens.

5

I’m having the same issue maybe
@mhartington has some suggestions.

6

I have the same issue with ng-show, ng-hide and custom button in nav-bar. Not sure it would help you, but finally I used following workaround in custom directive( my goal was to show button in nav bar when no back button was shown):

.directive('drawerToggle', function($rootScope, $log) {
        return {
            restrict: 'A',
            link: function($scope, $element, $attrs) {
              $scope.$on('$ionicView.beforeEnter', function(ev, viewData) {
                    if (viewData.enableBack) {
                        $element.addClass('hide');
                    } else {
                        $element.removeClass('hide');
                    }
                });
2 Likes
7

I have used ng-if and that works.Set the scope variable to true or false and place that in ng-if to show/hide Navigation Side menu. ng-show/ng-hide will not work here as this is ionic controlled.

1 Like
8

If you want to hide it on the whole view, then add
<ion-nav-buttons side="left"></ion-nav-buttons>
before your ion-content
it will override the one you have placed elsewhere (an abstract state or in the index or whatever)

1 Like
9

Can you give any plunkr for the same ?

10

So far this is the best method I’ve searched online. Thanks.

11

When I was using ng-hide to hide the <button> of <ion-nav-buttons>, I feel the same laggy transition.

I am now using Bootstrap 4 d-none class and it is a good work around for me.

<ion-nav-buttons side="right">
    <button class="button button-clear" ng-class="{'d-none': allowEdit}">Edit</button>
  </ion-nav-buttons>