bug(tabs) : ngIf changes tab order

[dylanvdmerwe]

Short description of the problem:

When binding to a specific ion-tab to make it visible or not, the tab ordering is incorrect.

What behavior are you expecting?

I want to bind a specific tab to a variable on whether it should show or not. The tab bar does hide/show the tab. However when the tab is shown, it's at the end of the tab bar instead of where it is specified in the HTML.

HTML - note the invite tab position

<ion-tabs>
    <ion-tab [root]="tab1Root" tabTitle="Invite" tabIcon="people" *ngIf="competitionRunning"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="Info" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Gallery" tabIcon="images"></ion-tab>
    <ion-tab [root]="tab4Root" tabTitle="Inbox " tabIcon="chatbubbles"></ion-tab>
</ion-tabs>

TS

@Page({
  templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
  tab1Root: any = InvitePage;
  tab2Root: any = InfoPage;
  tab3Root: any = GalleryPage;
  tab4Root: any = InboxPage;

  competitionRunning: boolean = true;

  constructor(private userState : SystemUserState, private appState : ApplicationInfoState){
      // find the user's university
      var university = appState.findUniversity(userState.universityId);
      this.competitionRunning = university.Competition.IsRunning;
  }
}

Screenshot:

Ionic Version: 2.x

Browser & Operating System: iOS / Android / Chrome

Run ionic info from terminal/cmd prompt:

Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
OS:
Node Version: v5.7.0

[guillenotfound]

I think this is a know issue (:

It has also been reported to Angular here: angular/angular#5363

[adamdbradley]

Instead of using *ngIf, we've added show to <ion-tab> to cover this scenario. It sets if the tab button is visible within the tabbar or not.

Additionally, we also added enabled.

If the tab is enabled or not. If the tab is not enabled then the tab button will still show, however, the button will appear grayed out and will not be clickable.

[captjones]

You can change the tab order using just CSS.

.tabs-icon-top > .tabs .tab-item:nth-of-type(1) { order:1; }

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.