How Can We [Show] And [Hidden] the Tab Onclicking of Menu apps Button in Ionic 2?

Question

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

• As of now when clicking the bottom tabs menu icon the top tab is getting displaying but if again clicking the button the top tab is not hidden.

• My Plunker for reference.

What I am looking for is, on clicking the bottom tab menu apps icon, the above tab need to be [show] and [hidden]. on clicking the menu in first time the tab should be display and clicking of second time tab need to be hidden...it's like toggle menu...

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

On clicking tab menu apps Icon:

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

My multiple tab Elements:

    <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>

Below function are used to [hidden] the element:-

hideTopTab:boolean=true;
   x(){

this.hideTopTab = false;
}

Please update the Plunker If you have a solution.

Answer 1

Here is what your expectation which is under the component as per this documentation.

I have added the below code to your plunker

<ion-toolbar no-border-top>
    <button  ion-button icon-only menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Menu Bar</ion-title>
</ion-toolbar>

<ion-menu [content]="content" id="menu2">
    <ion-header>
        <ion-toolbar color="danger">
          <ion-title>Menu 2</ion-title>
        </ion-toolbar>
    </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item menuClose="menu2" detail-none>Menu 1</button>
      <button ion-item menuClose="menu2" detail-none>Menu 2</button>
    </ion-list>
  </ion-content>
</ion-menu>

Update 1: As per your requirement, you should have the below code

x(){
        this.hideTopTab = !this.hideTopTab;
   }

LIVE DEMO