Mixing
How to hide ionic tabs on specific pages
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
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 !
app.component.ts
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(() => {
statusBar.styleDefault();
splashScreen.hide();
});
}
}
app.html
<ion-nav [root]="rootPage" #content></ion-nav>
connexion.html
<ion-header>
<ion-navbar>
<ion-title>
Connexion
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding >
<form #f="ngForm" (ngSubmit)="validerConnexion(f)">
<ion-item>
<ion-label color="primary" floating>Adresse mail</ion-label>
<ion-input [(ngModel)]="email" type="email" name="email" required clearInput="true"></ion-input>
</ion-item>
<ion-item>
<ion-label color="primary" floating>Mot de passe</ion-label>
<ion-input [(ngModel)]="motDePasse" type="password" name="motDePasse" required></ion-input>
</ion-item>
<br>
<button type="submit" ion-button round outline block [disabled]="f.invalid">Se connecter</button>
</form>
<button ion-button round outline block type="button" (click)="allerInscription()">S'inscrire</button>
</ion-content>
tabs.ts
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;
}
tabs.html
<ion-tabs>
<ion-tab [root]="homePage" tabIcon="home"></ion-tab>
<ion-tab [root]="listeGainsPage" tabIcon="add"></ion-tab>
<ion-tab [root]="listeDepensesPage" tabIcon="remove"></ion-tab>
</ion-tabs>
android 
angular ionic-framework tabs hide asked Jan 3 at 16:09
Dylan M.Dylan M.
2410
|
show 1 more comment
0
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 !
app.component.ts
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(() => {
statusBar.styleDefault();
splashScreen.hide();
});
}
}
app.html
<ion-nav [root]="rootPage" #content></ion-nav>
connexion.html
<ion-header>
<ion-navbar>
<ion-title>
Connexion
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding >
<form #f="ngForm" (ngSubmit)="validerConnexion(f)">
<ion-item>
<ion-label color="primary" floating>Adresse mail</ion-label>
<ion-input [(ngModel)]="email" type="email" name="email" required clearInput="true"></ion-input>
</ion-item>
<ion-item>
<ion-label color="primary" floating>Mot de passe</ion-label>
<ion-input [(ngModel)]="motDePasse" type="password" name="motDePasse" required></ion-input>
</ion-item>
<br>
<button type="submit" ion-button round outline block [disabled]="f.invalid">Se connecter</button>
</form>
<button ion-button round outline block type="button" (click)="allerInscription()">S'inscrire</button>
</ion-content>
tabs.ts
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;
}
tabs.html
<ion-tabs>
<ion-tab [root]="homePage" tabIcon="home"></ion-tab>
<ion-tab [root]="listeGainsPage" tabIcon="add"></ion-tab>
<ion-tab [root]="listeDepensesPage" tabIcon="remove"></ion-tab>
</ion-tabs>
asked Jan 3 at 16:09
Dylan M.Dylan M.
2410
Did you mean to disable the side menu? what tab are you talking about ?
– Mehdi
Jan 3 at 16:39
No, I'm talking about the ion-tabs at the bottom of the page (the ones with the home, add and delete icons)
– Dylan M.
Jan 3 at 17:12
well you just need to remove the corresponding html in the page where you don't want them. show us the html if you need help
– Mehdi
Jan 3 at 20:44
I juste added the connexion.html code. It's the page where I would like to remove the tabs. As you can see, there is no html corresponding to the tabs in this page, because I defined the tabs in the app.component.ts and app.html
– Dylan M.
Jan 3 at 20:55
I'd suggest that you don't use TabsPage as your rootPage in the app.component. You can add the tab component to the pages where you need it instead.
– Mehdi
Jan 4 at 9:30
|
show 1 more comment
0
0
0
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 !
app.component.ts
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(() => {
statusBar.styleDefault();
splashScreen.hide();
});
}
}
app.html
<ion-nav [root]="rootPage" #content></ion-nav>
connexion.html
<ion-header>
<ion-navbar>
<ion-title>
Connexion
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding >
<form #f="ngForm" (ngSubmit)="validerConnexion(f)">
<ion-item>
<ion-label color="primary" floating>Adresse mail</ion-label>
<ion-input [(ngModel)]="email" type="email" name="email" required clearInput="true"></ion-input>
</ion-item>
<ion-item>
<ion-label color="primary" floating>Mot de passe</ion-label>
<ion-input [(ngModel)]="motDePasse" type="password" name="motDePasse" required></ion-input>
</ion-item>
<br>
<button type="submit" ion-button round outline block [disabled]="f.invalid">Se connecter</button>
</form>
<button ion-button round outline block type="button" (click)="allerInscription()">S'inscrire</button>
</ion-content>
tabs.ts
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;
}
tabs.html
<ion-tabs>
<ion-tab [root]="homePage" tabIcon="home"></ion-tab>
<ion-tab [root]="listeGainsPage" tabIcon="add"></ion-tab>
<ion-tab [root]="listeDepensesPage" tabIcon="remove"></ion-tab>
</ion-tabs>
asked Jan 3 at 16:09
Dylan M.Dylan M.
2410
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 !
app.component.ts
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(() => {
statusBar.styleDefault();
splashScreen.hide();
});
}
}
app.html
<ion-nav [root]="rootPage" #content></ion-nav>
connexion.html
<ion-header>
<ion-navbar>
<ion-title>
Connexion
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding >
<form #f="ngForm" (ngSubmit)="validerConnexion(f)">
<ion-item>
<ion-label color="primary" floating>Adresse mail</ion-label>
<ion-input [(ngModel)]="email" type="email" name="email" required clearInput="true"></ion-input>
</ion-item>
<ion-item>
<ion-label color="primary" floating>Mot de passe</ion-label>
<ion-input [(ngModel)]="motDePasse" type="password" name="motDePasse" required></ion-input>
</ion-item>
<br>
<button type="submit" ion-button round outline block [disabled]="f.invalid">Se connecter</button>
</form>
<button ion-button round outline block type="button" (click)="allerInscription()">S'inscrire</button>
</ion-content>
tabs.ts
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;
}
tabs.html
<ion-tabs>
<ion-tab [root]="homePage" tabIcon="home"></ion-tab>
<ion-tab [root]="listeGainsPage" tabIcon="add"></ion-tab>
<ion-tab [root]="listeDepensesPage" tabIcon="remove"></ion-tab>
</ion-tabs>
asked Jan 3 at 16:09
Dylan M.Dylan M.
2410
asked Jan 3 at 16:09
Dylan M.Dylan M.
2410
edited Jan 3 at 21:16
Dylan M.
asked Jan 3 at 16:09
Dylan M.Dylan M.
2410
asked Jan 3 at 16:09
Dylan M.Dylan M.
2410
asked Jan 3 at 16:09
Dylan M.Dylan M.
2410
2410
Did you mean to disable the side menu? what tab are you talking about ?
– Mehdi
Jan 3 at 16:39
No, I'm talking about the ion-tabs at the bottom of the page (the ones with the home, add and delete icons)
– Dylan M.
Jan 3 at 17:12
well you just need to remove the corresponding html in the page where you don't want them. show us the html if you need help
– Mehdi
Jan 3 at 20:44
I juste added the connexion.html code. It's the page where I would like to remove the tabs. As you can see, there is no html corresponding to the tabs in this page, because I defined the tabs in the app.component.ts and app.html
– Dylan M.
Jan 3 at 20:55
I'd suggest that you don't use TabsPage as your rootPage in the app.component. You can add the tab component to the pages where you need it instead.
– Mehdi
Jan 4 at 9:30
|
show 1 more comment
Did you mean to disable the side menu? what tab are you talking about ?
– Mehdi
Jan 3 at 16:39
No, I'm talking about the ion-tabs at the bottom of the page (the ones with the home, add and delete icons)
– Dylan M.
Jan 3 at 17:12
well you just need to remove the corresponding html in the page where you don't want them. show us the html if you need help
– Mehdi
Jan 3 at 20:44
I juste added the connexion.html code. It's the page where I would like to remove the tabs. As you can see, there is no html corresponding to the tabs in this page, because I defined the tabs in the app.component.ts and app.html
– Dylan M.
Jan 3 at 20:55
I'd suggest that you don't use TabsPage as your rootPage in the app.component. You can add the tab component to the pages where you need it instead.
– Mehdi
Jan 4 at 9:30
Did you mean to disable the side menu? what tab are you talking about ?
– Mehdi
Jan 3 at 16:39
Did you mean to disable the side menu? what tab are you talking about ?
– Mehdi
Jan 3 at 16:39
No, I'm talking about the ion-tabs at the bottom of the page (the ones with the home, add and delete icons)
– Dylan M.
Jan 3 at 17:12
No, I'm talking about the ion-tabs at the bottom of the page (the ones with the home, add and delete icons)
– Dylan M.
Jan 3 at 17:12
well you just need to remove the corresponding html in the page where you don't want them. show us the html if you need help
– Mehdi
Jan 3 at 20:44
well you just need to remove the corresponding html in the page where you don't want them. show us the html if you need help
– Mehdi
Jan 3 at 20:44
I juste added the connexion.html code. It's the page where I would like to remove the tabs. As you can see, there is no html corresponding to the tabs in this page, because I defined the tabs in the app.component.ts and app.html
– Dylan M.
Jan 3 at 20:55
I juste added the connexion.html code. It's the page where I would like to remove the tabs. As you can see, there is no html corresponding to the tabs in this page, because I defined the tabs in the app.component.ts and app.html
– Dylan M.
Jan 3 at 20:55
I'd suggest that you don't use TabsPage as your rootPage in the app.component. You can add the tab component to the pages where you need it instead.
– Mehdi
Jan 4 at 9:30
I'd suggest that you don't use TabsPage as your rootPage in the app.component. You can add the tab component to the pages where you need it instead.
– Mehdi
Jan 4 at 9:30
|
show 1 more comment
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54025935%2fhow-to-hide-ionic-tabs-on-specific-pages%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54025935%2fhow-to-hide-ionic-tabs-on-specific-pages%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Did you mean to disable the side menu? what tab are you talking about ?
– Mehdi
Jan 3 at 16:39
No, I'm talking about the ion-tabs at the bottom of the page (the ones with the home, add and delete icons)
– Dylan M.
Jan 3 at 17:12
well you just need to remove the corresponding html in the page where you don't want them. show us the html if you need help
– Mehdi
Jan 3 at 20:44
I juste added the connexion.html code. It's the page where I would like to remove the tabs. As you can see, there is no html corresponding to the tabs in this page, because I defined the tabs in the app.component.ts and app.html
– Dylan M.
Jan 3 at 20:55
I'd suggest that you don't use TabsPage as your rootPage in the app.component. You can add the tab component to the pages where you need it instead.
– Mehdi
Jan 4 at 9:30