How do I update the state of buttons in tabs in ionic?

Question

I am building an app using the tabbed template in Ionic. It has 4 buttons. .

When the user is logged out, the 4th button should take them to the login/registration page as above.

When they are logged in, it should show a logout button as shown above.

Below is my code in tabs.html showing my tabs:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Search" tabIcon="search"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="List Providers" tabIcon="list"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="Login/Register" tabIcon="finger-print" *ngIf="loggedIn"></ion-tab>
  <ion-tab tabTitle="Logout" tabIcon="exit" (click)="logout()" *ngIf="!loggedIn"></ion-tab>
</ion-tabs>

When I test out this arrangement by manually setting the value of the boolean variable loggedIn in tabs.ts, it works as expected.

What I want is for the tabs to switch automatically, depending on whether or not the user is logged in. When a user successfully logs in, I am setting a value loggedIn in local storage to true. I then have the code below in my tabs.ts which should toggle the login/logout buttons:

loggedIn: boolean = false;

  ionViewWillEnter(): void {

    if (localStorage.getItem('loggedIn') == 'true') {
      this.loggedIn = true;
      console.log("we are logged in!");
    } else {
      this.loggedIn = false;
      console.log("we are logged out");
    }
  }

The problem however, is that though the value of the variable loggedIn is being set and changed correctly, the view in tabs.html is not updating to then show the logout button, it still shows the login/register button. How can i get the tab to refresh each time it a button is clicked? I have tried adding code to the ionViewWillEnter() function but it did not work. Any help will be greatly appreciated!

My system:

$ ionic info

Ionic:

   ionic (Ionic CLI)  : 4.0.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v8.10.0 (/usr/bin/node)
   npm               : 3.5.2
   OS                : Linux 4.15

Environment:

   ANDROID_HOME : /home/user/Android/Sdk

So when you hit this page you are seeing `we are logged in!` in the console? — BRass, Oct 23 '18 at 15:22

score 0 · Answer 1 · answered Oct 23 '18 at 19:41

The problem is that you are using a local event of tabs ionViewWillEnter(), so it only will get the value once, i suggest you to create a external provider and use that provider var to set the state of your tabs, changing the value of the var in the provider when you change your state to loggedIn/Off.

import { GlobalProvider } from "../../providers/globals"
constructor(        
    public global: GlobalProvider,
){
    if(!this.global.loggedIn)this.global.loggedIn=false;
}

in the provider

@Injectable()
export class GlobalProvider {
    public loggedIn = false;
}

in the html

<ion-tabs>
   <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
   <ion-tab [root]="tab2Root" tabTitle="Search" tabIcon="search"></ion-tab>
   <ion-tab [root]="tab3Root" tabTitle="List Providers" tabIcon="list"></ion-tab>
   <ion-tab [root]="tab4Root" tabTitle="Login/Register" tabIcon="finger-print" *ngIf="global.loggedIn"></ion-tab>
   <ion-tab tabTitle="Logout" tabIcon="exit" (click)="logout()" *ngIf="!global.loggedIn"> 
</ion-tab>

score 0 · Answer 2 · answered Oct 23 '18 at 19:47

IMHO the best way to implement this, is to create a Subject<boolean> or BehaviourSubject<boolean> (this is the difference between them https://stackoverflow.com/a/43351340/7200009). Do you have an AuthService? If so, you can create a subject variable and subscribe to it in your tabspage. Something like this:

AuthService.ts

  loggedInChanged: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  login(){
    // Your Login logic.
    this.loggedInChanged.next(true);
  }

  logout(){
    // Your Logout logic.
    this.loggedInChanged.next(false);
  }

TabsPage.ts

  loggedIn: boolean;
  loggedInChangedSubscription: Subscription;

  constructor(private authService: AuthService){}

  ionViewDidLoad(){
    this.loggedInChangedSubscription = this.authService.loggedInChanged.subscribe(loggedIn => {
      this.loggedIn = loggedIn;
    })
  }

  ionViewWillUnload() {
    this.loggedInChangedSubscription.unsubscribe();
  }

score 0 · Answer 3 · answered Oct 24 '18 at 01:53

0

I have an app with the same behavior that you need what I did was use https://ionicframework.com/docs/api/util/Events/

you can generate the event from the close session button and receive the event from the tabs.ts

answered Oct 24 '18 at 01:53

Oscar Mera

64
1
7

How do I update the state of buttons in tabs in ionic?

3 Answers3