Ionic-tab ng-if is changing tabs order

Guys,

My logic is as follows:

1.- I have a tab app
2.- If the user is admin, then I will show him an extra tab option
3.- If the user is not admin, then I will hide the admin tab

My code is:

  <!-- First Tab -->
  <ion-tab title="{{ 'tab-first' | translate }}." icon="ion-alert-circled" href="#/tab/first">
    <ion-nav-view name="tab-first"></ion-nav-view>
  </ion-tab>

  <!-- Second Tab (***Admin view***) -->
  <ion-tab title="{{ 'tab-second' | translate}}" icon="ion-person-stalker" href="#/tab/second" ng-if="$root.admin">
    <ion-nav-view name="tab-second"></ion-nav-view>
  </ion-tab>

  <!-- Third Tab -->
  <ion-tab title="{{ 'tab-third' | translate }}" icon="ion-arrow-swap" href="#/tab/third">
    <ion-nav-view name="tab-third"></ion-nav-view>
  </ion-tab>

I have the rootScope.admin on my SignInCtrl, the show/hide operation is working, but the problem is that when the user is admin, the Second Tab’s position is at the end of the tabs menu, but not in the second position.

How can I force to the tab menu to show the Second Tab on the Second position but not the third one?

(I tried with ng-show but is just not working on this case)

ionic info

Your system information:

Cordova CLI: 5.4.0
Gulp version: CLI version 3.9.0
Gulp local:
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
ios-deploy version: 1.7.0
ios-sim version: 3.0.0
OS: Mac OS X El Capitan
Node Version: v0.12.6
Xcode version: Xcode 7.2.1 Build version 7C1002

Thanks guys!

I had the same problem… so I solved that using the hidden attribute + expression;

Hello, thanks for opening an issue with us! We actually have a show property that you can bind to to get similar functionality to a raw *ngIf but without issues like this. Here is the documentation for it if you would like to read more. Also, i made a plunker here that shows how to use it. Thanks for using Ionic!