How to hide tabs at logout

Ionic Framework ionic-v3
1

In My App post Logout i need the tabs to not show.

since the user is not logged in, there is no need to provide navigation items which they cannot use.

on Logout the user goes to login page and at logout only the tabs are still showing on the login page (tabs do not show on login at first login)

Any ideas on how this can be done?

2

Maybe sth easy like this could work?

<ion-tabs id="tabs">
  <ion-tab [root]="tab1Root"></ion-tab>
  <ion-tab [root]="tab2Root"></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>

If you logout:

onlogout(){
document.getElementById("tabs").style.display="None";
}

For Login:

onlogin(){
document.getElementById("tabs").style.display="block";
}
3

I have the same problem as Saeed Ansari and using the style.display none and block makes my login screen go full blank after logout. I am still looking for a solution to this problem

Edited*
I just solved it by making a push of the login screen after logout. this makes the loginpage display on top of the tabs.

4

I don’t think you should hide the tabs at all - you should display a different page

For example:
in your main/top page you have (app.html)

<ion-nav [root]="rootPage"></ion-nav>

The rootPage can be assigned the login page, if you need to authenticate or the tabs page if you are authenticated.

When you log out, you can set the root like this

this.app.getRootNav().setRoot(LoginPage);

For more info and some examples
see App getRootNav
and NavController setRoot

Also look at some of the starter apps that also use this pattern for login/logout