Hide a tab on condition

Ionic Framework ionic-v3
1

I am trying to hide one of my tabs based on a condition, as follows:

<ion-tabs>
    <ion-tab [root]="tab1" tabTitle="Tab1"></ion-tab>
    <ion-tab *ngIf="showTab2" [root]="tab2" tabTitle="Tab2"></ion-tab>
    <ion-tab [root]="tab3" tabTitle="Tab3"></ion-tab>
</ion-tabs>

If tab 2 is not shown, based on the condition, it is still visible, but selecting tab2 shows tab3’s content. Selecting tab3 shows a black screen above the tabs.

Is there a way to get this to work, or is this a bug in ionic?

2

I believe tabs operate largely on numeric indexes under the hood, which is probably what’s causing what you’re seeing. From a UX perspective, having tabs move around physically strikes me as problematic anyway, so I would go with disabling it instead of trying to nuke it out of the DOM anyway.

3

Thanks @rapropos. From a UX perspective, my app has 2 modes. When the user switches to the second mode, one of the tabs is no longer relevant and therefore I hide it. As a workaround, I just created a second tabs page, and switch between them when the mode changes.

4

Don’t know for sure if this would work - but have you tried putting the condition on the ion-tabs component?

<ion-tabs *ngIf="showTab2">
    <ion-tab [root]="tab1" tabTitle="Tab1"></ion-tab>
    <ion-tab [root]="tab2" tabTitle="Tab2"></ion-tab>
    <ion-tab [root]="tab3" tabTitle="Tab3"></ion-tab>
</ion-tabs>
<ion-tabs *ngIf="!showTab2">
    <ion-tab [root]="tab1" tabTitle="Tab1"></ion-tab>
    <ion-tab [root]="tab3" tabTitle="Tab3"></ion-tab>
</ion-tabs>
5

That doesn’t seem to work.

But adding [enabled]=“isEnabled”, to the ion-tab seems to work. Where isEnabled is a boolean property on my tabs class.

6

Would you elaborate on how you got this to work?

7

Here’s what I did for dynamic tabs:


<ion-tabs>
    <div  *ngFor="let tab of tabs" >
    <ion-tab [root]="tab.root" [tabTitle]="tab.title" 
    [tabIcon]="tab.icon"></ion-tab>
    </div>
</ion-tabs>

on the backend I have

  tabs: Array<Object> = [ { title: "Home", root: HomePage, icon: "home" } ];
  allowedTabs: any;
  homepage: any = HomePage;
  newspage: any = "NewsPage"

    styleCtrl.getAppStyle().then( data => {
      let tabs = data.tabs;
      console.log( data.tabs );
      if( tabs.indexOf("EditHomepagePage") > -1 ) {
        this.tabs.push({ title: "Edit Pages", root: this.auth.getUserInfo ? LoginPage : "EditHomepagePage", icon: "brush" });
      }
      if( tabs.indexOf("NewsPage") > -1 ) {
        this.tabs.push({ title: "News", root: "NewsPage", icon: "paper" });
      }
      if( tabs.indexOf("DonatePage") > -1 ) {
        this.tabs.push({ title: "Donate", root: "DonatePage", icon: "card" });
      }
      if( tabs.indexOf("CalendarPage") > -1 ) {
        this.tabs.push({ title: "Events", root: "CalendarPage", icon: "calendar" });
      }
      if( tabs.indexOf("AboutPage") > -1 ) {
        this.tabs.push({ title: "About", root: "AboutPage", icon: "information-circle" });
      }
    });

I’m pulling async data from a database and then just pushing onto the tabs array. It works.

8

Thanks for sharing this solution.

Questions

  1. When you say “backend”, you’re talking about the component?
  2. How does the “allowedTabs” variable fit in?
  3. Is styleCtrl.getAppStyle() a user-defined function?
9

Try binding to [hidden] instead of *ngIf, that’ll keep it in DOM

10

For future reference, there’s actually the [show] attribute which works and is simple. I was struggling to find the solution only to see that I had already used the show attribute on another tab :smiley:

11

This totally fixed the problem…thanks a lot!

12

That works perfectly fine. Thank you very much for sharing