Ionic 4 Events not working in device but working on browser

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?

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 E.g.

 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);
      })