I have “LoginPage” set to root, and after logging in the user is directed to “TabsPage”.
But I want to develop the part of LogOut, how to pop a “TabsPage” so that only “LoginPage” is visible?
Already tried:
This.navCtrl.setRoot (LoginPage);
This.navCtrl.pop (TabsPage);
It even directs you to “LoginPage” but the tab is visible.
How to proceed?
Att
I think i dont really understand what you want but if you want to develope the logout in your tabpage and set the Login to root you could do this:
this.navCtrl.setRoot(LoginPage);
//Then you Login if Login is successful do this:
this.navCtrl.setRoot(TabsPage);
//In TabsPage with the Logout Button do this:
this.navCtrl.setRoot(LoginPage);
Or you can do something like this if you like push
//Note that with Push you will get a back button in tabs page but you can disable them
this.navCtrl.setRoot(LoginPage);
//After Login is successful
this.nacCtrl.push(TabsPage);
//And with the LogoutButton
this.navCtrl.popToRoot();
if i missunderstand what you exactly want please correct me.
I do not think that’s what I meant.
Let’s do it by steps:
When I log in, I have the following screen (TabsPage):
After logout the angle redirects to LoginPage, however the tabs remain visible (highlighted in red).
The Code used was this:
this.navCtrl.popToRoot ();
this.navCtrl.setRoot (LoginPage);
I think I’ve been able to better report the problem now …
One more Question.
Whitch one is your Root Layout at the Startup in your app.component.ts?
Because in my app its the Login Page. So the app.html doesnt contain any tabs.
Edit:
Can you post your component.ts and your app.html?
Edit2:
Also you could try this:
this.navCtrl.popToRoot ();
this.navCtrl.setRoot (LoginPage);
WITHOUT this line:
this.navCtrl.popToRoot ();
Edit3:
I do to much edits 
“Edit”:
app.component.ts
import { Component } from ‘@angular/core’;
import { Platform } from ‘ionic-angular’;
import { StatusBar, Splashscreen } from ‘ionic-native’;
import { TabsPage } from ‘…/pages/tabs/tabs’;
import { LoginPage } from ‘…/pages/login/login’;
@Component({
templateUrl: ‘app.html’
})
export class MyApp {
rootPage = LoginPage;
//rootPage = TabsPage;
constructor(platform: Platform) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
}
}
app.html
Contains a ion-nav with [root]=“rootPage”
“Edit2”
I tried the way you suggested, but I got the same result, it directs to LoginPage, but the tabs continue to be displayed.
Did you already tried to add this in your login.html
hide-tabs
like this:
<ion-content hide-tabs>
</ion-content>
Edit
if you are in a Component Page of your Tabs use this to change the root:
this.nav.rootNav.setRoot(LoginPage);
I tested the hide-tabs but it did not work.
I could not use the "this.nav.rootNav.setRoot (LoginPage);"
Can not use the “rootNav” property.
I tried this way:
Public navCtrl: NavController;
This.navCtrl.rootNav.setRoot (LoginPage);
I know I am late to the party, and this is a few months old already.
But I think the code you are looking for is to access the root nav from the App utility class (https://ionicframework.com/docs/api/components/app/App/) using getRootNav() and pop() from there.
Ionic Tabs have a strange navigation stack (it’s not so strange when you think why). The <ion-tabs> instance is pushed to the root nav, and each <ion-tab> has its own NavController. This is so you can push as deep as you need to per tab, and simply switch to another tab without screwing up the other tab’s navigation stack.
Essentially what you want to do is this on one of your pages:
logout() {
this.app.getRootNav().pop();
}
The <ion-tabs> is pushed to the root navigation stack, and each tab’s individual navigation stack is a child to this, so is not part of the root. Make sense?
Not to me. I want each element of my app to be independent, with clearly defined boundaries for interaction. Having arbitrary pages mess with the app component’s nav stack breaks that contract, so I consider it flawed design.
Unfortunately, I cannot answer for the design decisions. 
As for the alternative solution. I agree - I suppose it depends on how you want to handle your navigation stack. I tend to avoid interacting with the root page unless I am initialising the app, since you don’t get the advantages built into the NavController.
import { App } from ‘ionic-angular’;
import this where ur logout function is.
constructor(public appCtrl: App){}
add to contraller .
logout() {
this.appCtrl.getRootNav().setRoot(LoginPage);
}
use this and it will work.
That works for me. Ionic 3
Also works at Ionic 3. thank you
Whats up man!
It works for me!
I’m using Ionic 3
Thanks !
Awesome
works, ionic 2
Muito obrigado, Deu tudo certo 
In your AppComponent.ts:
import { Component } from '@angular/core';
import { Config, Nav, Platform } from 'ionic-angular';
import { AuthService, ServiceWorkerService, LoggerService } from '@core/index';
@Component({
templateUrl: 'app.component.html'
})
export class AppComponent {
// [root]="rootPage"
public rootPage: any = 'LoadingPage';
// [class]="theme"
public theme: String = 'orange-theme';
constructor(public config: Config,
public platform: Platform,
private authService: AuthService,
private swService: ServiceWorkerService,
private logger: LoggerService) {
this.initialiseApp();
}
private initialiseApp() {
this.platform.ready().then(() => {
this.swService.run();
});
this.authService.afAuth.authState.subscribe(user => {
if (user) {
this.rootPage = 'TabsPage';
} else {
this.rootPage = 'SignInPage';
}
}, () => {
this.rootPage = 'SignInPage';
}
);
}
}
app.component.html:
<ion-nav [root]="rootPage" [class]="theme"></ion-nav>
Hi@IonBruno
My suggestion is you have to use
import { App } from ‘ionic-angular’;
this.appCtrl.getRootNav().setRoot(LoginPage);
instead of
this.navCtrl.setRoot(LoginPage);