title: How I can hide and show tabs conditionally - Ionic 2?
body: <p>The case is the following: I have a <code>ion-tabs</code> container with several ion-tab elements, and different users that logs into my application. What I need to do is to show or hide the <code>ion-tab</code> elements depending on the user type logged.</p>
  
  <p>The problem is that I need to do this dynamically, and if I use a directive like <code>[show]="variable"</code>, it does not work.</p>
  
  <p><strong>tabs.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  import { Page1 } from '../page1/page1';
  import { Page2 } from '../page2/page2';
  
  @Component({
    templateUrl: 'tabs.html'
  })
  export class TabsPage {
    // this tells the tabs component which Pages
    // should be each tab's root Page
    tab1Root: any;
    tab2Root: any;
    tab3Root: any;
    tab4Root: any;
    tab5Root: any;
    variable: any;
  
    constructor(public userData: UserData) {
     // get variable from local storage
      this.userData.getUser().then((value) =&gt; {
        if(value.typeLabel == 'Expert') {
          this.variable = true;
          console.log('1-&gt;',value.typeLabel);
        }else if(value.typeLabel == 'Client'){
          this.variable = false;
          console.log('2-&gt;',value.typeLabel);
        }
      });
  
      this.tab1Root = this.variable?Page1:Page2; &lt;-- i want to show specify tabs depending on variable value
      this.tab2Root = NotificationsPage;
      this.tab3Root = MessagesPage;
      this.tab4Root = InstructionsPage;
      this.tab5Root = ExpertsPage;
    }
  }
  </code></pre>
  
  <p><strong>tabs.html</strong></p>
  
  <pre><code>&lt;ion-tabs&gt;
    &lt;ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"&gt;&lt;/ion-tab&gt;
    &lt;ion-tab [root]="tab2Root" tabTitle="tab_title" tabIcon="notifications"&gt;&lt;/ion-tab&gt;
    &lt;ion-tab [root]="tab3Root" tabTitle="tab_title" tabIcon="home"&gt;&lt;/ion-tab&gt;
    &lt;ion-tab [root]="tab4Root" tabTitle="tab_title" tabIcon="home"&gt;&lt;/ion-tab&gt;
    &lt;ion-tab [root]="tab5Root" tabTitle="tab_title" tabIcon="home"&gt;&lt;/ion-tab&gt;
  &lt;/ion-tabs&gt;
  </code></pre>
  
  <p>But always <code>this.tab1Root</code> return <code>Page1</code>;</p>
  
  <p><strong>What am I doing wrong? Can somebody help me?</strong></p>