CODEWITHSUNDEEP
htmlcssangularionic2
R. Mani Selvam
R. Mani Selvam

Reputation: 320

How Can We Hide One Tab Onclicking Of Another Tab Menu apps icon in Ionic 2?

I am developing an ionic 2 application and have multiple tabs in my application. I need to hide the top tab when clicking the bottom tabs menu icon.

What I am looking for is, on clicking the bottom tab menu apps icon, the above tab need to be hidden.

In angularjs I can hide this field using ng-hide but I don't know how to hide this field in ionic 2.

On clicking tab menu apps icon:

<ion-tabs tabs-only>
    <ion-tab tabIcon="apps" [root]="tab3Root"></ion-tab>
</ion-tabs>

The above tab need to be hide

<ion-tabs tabs-only2 tabbar>
  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="pulse"></ion-tab>
</ion-tabs>

My multiple tab elements:

<ion-tabs tabs-only>
    <ion-tab tabIcon="apps" [root]="tab3Root"></ion-tab>
</ion-tabs>

<ion-tabs tabs-only2 tabbar>
  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="pulse"></ion-tab>
</ion-tabs>

Please update the plunker If you have a solution.

Upvotes: 0

Views: 440

Answers (1)

n00b
n00b

Reputation: 1852

Ionic2 is using Angular2 and you can use the [hidden] binding to hide based on click binding to any element you want. But remember the ion-tabs is also container for the tab pages, and not just some menu. Hiding it will hide the current tab page.

check plunkr

<ion-tabs tabs-only (click)="x()" >
    <ion-tab tabIcon="apps" [root]="tab3Root"></ion-tab>
</ion-tabs>

<ion-tabs tabs-only2 tabbar (click)="x()" [hidden]="hideTopTab" >
  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="pulse"></ion-tab>

</ion-tabs>

and

  hideTopTab:boolean=false;
  x(){
    this.hideTopTab = true;
  }

Upvotes: 1

Related Questions