How can I hide and show ion-tabs conditionally in ionic2?

Question

I have 5 tabs

<ion-tabs tabsPlacement="bottom" tabsLayout="icon-top" tabsHighlight="true" color="primary">
  <ion-tab [root]="myCardsTabRoot" tabTitle="My Cards" tabIcon="ios-photos"></ion-tab>
  <ion-tab [root]="calendarTabRoot" tabTitle="Calendar" tabIcon="calendar"></ion-tab>
  <ion-tab [root]="myProfileTabRoot" tabTitle="My Profile" tabIcon="ios-person"></ion-tab>
  <ion-tab [root]="searchTabRoot" tabTitle="Search" tabIcon="ios-search"></ion-tab>
  <ion-tab [root]="pendingRequestsTabRoot" tabTitle="Follow Req" tabIcon="notifications" tabBadge="{{pendingRequests}}" tabBadgeStyle="danger"></ion-tab>
</ion-tabs>

I want to show last tab only if there is any pending requests, I tried below but still no chance and doesn't show/hide tab when pendingRequests value is changing, value of pendingRequests is changed in ionViewDidEnter()

  <div *ngIf="pendingRequests > 0">
    <ion-tab [root]="pendingRequestsTabRoot" tabTitle="Follow Req" tabIcon="notifications" tabBadge="{{pendingRequests}}" tabBadgeStyle="danger"></ion-tab>
  </div>

and

<ion-tab *ngIf="pendingRequests > 0" [root]="pendingRequestsTabRoot" tabTitle="Follow Req" tabIcon="notifications" tabBadge="{{pendingRequests}}" tabBadgeStyle="danger"></ion-tab>

If I restart app, tabs are displayed correctly based on the value of pendingRequests the only issue is that when the value is changed tabs doesn't hide/show correspondingly

here is the code for updating pendingRequests

  ionViewDidEnter() {
    this.refreshPrendingRequests();
  }

  refreshPrendingRequests() {
    this.contactsService.getContactRequestsCount(this.userInfoService.currentProfile.id)
      .subscribe(count => this.pendingRequests = count);
  }

Update

Based on @Sampath suggestion, I create a plunker for it. The behavior is different than what I have it on my app, but also this one is not working too.

Clicking on top right toolbar button should show/hide tab http://plnkr.co/edit/Cx6Pyr9AihvX66ASed0s?p=preview

can you show the value change of the `pendingRequests` code snippet? — Sampath, Mar 26 '17 at 01:46
what can you see when you debug the code? how that value changes are working? — Sampath, Mar 26 '17 at 13:33
@Sampath I added another button on toolbar, and that one is hiding and showing correctly, so it means that changing value is working perfect and even angular binding is working right — Reza, Mar 27 '17 at 13:00
Can you put your issue on Plunker? Here is the latest plunker template where you can use it.http://plnkr.co/edit/pVLgknBQq6KMsovohmO9?p=preview — Sampath, Mar 27 '17 at 13:12
You didn't set it correctly.please see the console message on your plunker and fix that first.It says issue with the `homepage`. — Sampath, Mar 27 '17 at 16:01
@Sampath Sorry, I don't get it, I took a look at chrome dev tools console, there are some general error like 'Uncaught DOMException: Blocked a frame with origin "http://api.plnkr.co" from accessing a cross-origin frame.' which I get in your plunker too, do you mean that? — Reza, Mar 27 '17 at 16:05
please see the image on your post.Either you did it wrongly or you have shared a wrong plunker link with us. — Sampath, Mar 27 '17 at 16:09
@Sampath I don't see that errors, I double checked the url and it's correct, please see attached image — Reza, Mar 27 '17 at 16:52
according to your image where it seems you're working on the plunk without logged in.that means you cannot save the latest changes. I think that is the reason for that.If it is not the case please create a new project using Ionic2 and include your issue there and put that into GIT repo.then we can play with that. — Sampath, Mar 28 '17 at 01:25
I have tried this.But unfortunately unable to find a solution.Maybe you too can try this with: https://ionicframework.com/docs/api/util/Events/ and here how to apply it: http://stackoverflow.com/questions/42942498/life-cycle-events-of-app-component-ts — Sampath, Apr 01 '17 at 10:24

Sampath · Answer 1 · 2017-04-03T09:44:20.083

You can do that if you follow the below steps.The code is self-explanatory.If you need any help please comment below.

Note: This is just a working sample.Hope you can easily convert it to your use case.

You can play with this if you clone the Git Repo here.

I have used Ionic2 Event publish/subscribe pattern on this sample

Step 1: Create another tab page TabSet1Page

.ts

@Component({
  selector: 'page-tab-set1',
  templateUrl: 'tab-set1.html'
})
export class TabSet1Page {

  tab1Root: any = HomePage;
  tab2Root: any = AboutPage;

  constructor() { }

}

.html

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
</ion-tabs>

Step 2:

app.component.ts

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = TabsPage;

  constructor(public events: Events) {

    this.subscribePendingRequests();//subscribe
    this.events.publish('pending-requests', 0);//publish
  }

  //subscribe
  subscribePendingRequests() {
    this.events.subscribe('pending-requests', (data) => {
      if (data > 0) {
        this.rootPage = TabSet1Page;
      }
      else {
        this.rootPage = TabsPage;
      }
    });
  }

}

Step 3:

about.ts

 @Component({
      selector: 'page-about',
      templateUrl: 'about.html'
    })
    export class AboutPage {

      constructor(public events: Events) { }

      //refresh
      refreshPendingRequests() {
        this.events.publish('pending-requests', 5);
      }
   }

about.html

<ion-header>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
     <ion-buttons end>
      <button ion-button icon-only (click)="refreshPendingRequests()">
        <ion-icon name="ios-funnel"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

thanks, from my understanding of your code the idea is to have two different page one of them has 2 tabs another has 3 pages, then based on value changing root-page, is it correct? — Reza, Apr 03 '17 at 13:15
I know that this will work, but I have two tabs to show hide then I have to create 4 combination to support that — Reza, Apr 06 '17 at 12:48
This is the only option you have.Due to the nature of Tabs design, you cannot do this like other HTML elements.Because tabs are working like a Root page.So if you need to go ahead with this use case, you have to use above solution. — Sampath, Apr 06 '17 at 12:59

How can I hide and show ion-tabs conditionally in ionic2?

Update

1 Answers1