Ionic 4 Events not working in device but working on browser

Question

I'm using "@ionic/angular": "^4.11.10"

I'm trying to display the tabs in ion-tabs in ion-tab-bar depending on whether an event was emitted. I have an *ngIf for conditional rendering. Here's the code:

<ion-tabs color="danger">
    <ion-tab-bar class="tab-bar" slot="bottom">
        <ion-tab-button *ngIf="!registerClicked" tab="tab1">
            <ion-icon name="thumbs-up"></ion-icon>
            <ion-label>{{'Transfer' | translate}}</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="tab2">
            <ion-icon name="gift"></ion-icon>
            <ion-label>{{'Perks' | translate}}</ion-label>
        </ion-tab-button>
    </ion-tab-bar>
<ion-tabs>

Here's the event emitter:

import { Events } from '@ionic/angular';
export class LoginModalPage 
  constructor(
      public event:Events
    ) { }

  public login() {
      this.event.publish('registerClicked', false);
  }
}

Similarly, there is another function that sets registerClicked to true:

import { Events } from '@ionic/angular';
export class RegisterModalPage 
  constructor(
      public event:Events
    ) { }

  public register() {
      this.event.publish('registerClicked', true);
  }
}

and in the code behind for the tabs,

import { Events } from '@ionic/angular';
export class TabsPage {
  public registerClicked:boolean;
  constructor(
    public event: Events
  ) {
    this.event.subscribe('registerClicked', (data) =>{
      this.registerClicked = data;
    });
  }
}

Now the code is working as expected when I run localhost:4200, the tab1 is displayed when the login function is called on button click and the tab is not visible when I click a button that executes the register() function. However when I build an apk, and test it on a device, this doesn't work. Can anyone provide any insight into accomplishing this?

Answer 1

To update Data from one page to other we used Events library. but events are no longer available in ionic 5. blow is the solution. run command:

ionic generate service events        // this will create events provider

copy paste blow code.

import { Injectable } from '@angular/core';
import {Subject} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class EventsService {

private fooSubject = new Subject<any>();

constructor() { }


    publishLogin(data: any) {
        this.fooSubject.next(data);
    }

    receiveLogin(): Subject<any> {
        return this.fooSubject;
    }
}

From Page A: import your service initialize it in constructor //

constructor(public events: EventsService){}

and publish event Eg

 this.events.publishLogin(yourDataVariable);

Receive it in Page B: import your service initialize it in constructor //

    constructor(public events: EventsService){}

this.events.receiveLogin().subscribe((res:any)=>{
        console.log(res);
      })