title: How to hide ionic tabs on specific pages
body: <p>I would like to hide or remove the ion tabs from 2 pages of my ionic Angular application and to keep them on the other pages. I tried to dynamicaly change the rootPage, but it didn't work. I'm using Ionic 3.9.2 and Angular 5. How can I hide these tabs only in specific pages ? Thanks in advance !</p>
  
  <p><a href="https://i.stack.imgur.com/tmpxo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tmpxo.png" alt="A page where I want to remove the tabs"></a></p>
  
  <hr>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Platform } from 'ionic-angular';
  import { StatusBar } from '@ionic-native/status-bar';
  import { SplashScreen } from '@ionic-native/splash-screen';
  
  import { TabsPage } from '../pages/tabs/tabs';
  import { AuthService } from '../services/auth.service';
  
  @Component({
    templateUrl: 'app.html'
  })
  export class MyApp {
    public rootPage: any = TabsPage;
  
    constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private authService: AuthService) {
      platform.ready().then(() =&gt; {
        statusBar.styleDefault();
        splashScreen.hide();
      });
    }
  }
  </code></pre>
  
  <hr>
  
  <p><strong>app.html</strong></p>
  
  <pre><code>&lt;ion-nav [root]="rootPage" #content&gt;&lt;/ion-nav&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>connexion.html</strong></p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-navbar&gt;
      &lt;ion-title&gt;
        Connexion
      &lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content padding &gt;
    &lt;form #f="ngForm" (ngSubmit)="validerConnexion(f)"&gt;
      &lt;ion-item&gt;
        &lt;ion-label color="primary" floating&gt;Adresse mail&lt;/ion-label&gt;
        &lt;ion-input [(ngModel)]="email" type="email" name="email" required clearInput="true"&gt;&lt;/ion-input&gt;
      &lt;/ion-item&gt;
      &lt;ion-item&gt;
        &lt;ion-label color="primary" floating&gt;Mot de passe&lt;/ion-label&gt;
        &lt;ion-input [(ngModel)]="motDePasse" type="password" name="motDePasse" required&gt;&lt;/ion-input&gt;
      &lt;/ion-item&gt;
  
      &lt;br&gt;
  
      &lt;button type="submit" ion-button round outline block [disabled]="f.invalid"&gt;Se connecter&lt;/button&gt;
    &lt;/form&gt;
  
    &lt;button ion-button round outline block type="button" (click)="allerInscription()"&gt;S'inscrire&lt;/button&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>tabs.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { HomePage } from '../home/home';
  import { ListeGainsPage } from '../listeGains/listeGains';
  import { ListeDepensesPage } from '../listeDepenses/listeDepenses';
  
  @Component({
    selector: 'page-tabs',
    templateUrl: 'tabs.html'
  })
  export class TabsPage {
    homePage = HomePage;
    listeGainsPage = ListeGainsPage;
    listeDepensesPage = ListeDepensesPage;
  }
  </code></pre>
  
  <hr>
  
  <p><strong>tabs.html</strong></p>
  
  <pre><code>&lt;ion-tabs&gt;
    &lt;ion-tab [root]="homePage" tabIcon="home"&gt;&lt;/ion-tab&gt;
    &lt;ion-tab [root]="listeGainsPage" tabIcon="add"&gt;&lt;/ion-tab&gt;
    &lt;ion-tab [root]="listeDepensesPage" tabIcon="remove"&gt;&lt;/ion-tab&gt;
  &lt;/ion-tabs&gt;
  </code></pre>