Ionic 4 events not working

Ionic Framework
1

According to a comment in the post announcing Ionic beta 4, events should work the same way as previus versions. The only required change would be the import, @ionic/angular instead of ionic-angular.

But I haven’t yet managed to make them work. I have tested the most simple use case:

I subscribe to an event in ngOnInit method, and publish that same event when clicking a button. But nothing seems to happen.

import { Events } from '@ionic/angular';
export class LoginPage implements OnInit {
  constructor(public events: Events) { }
  ngOnInit(){
    this.events.subscribe('testevent', (data) => {
      console.log('testevent');
      console.log(data);
    });
  }
  publishEvent(){
    console.log('shouldPublishEvent');
    this.events.publish('testevent', {key: 'value'});
  }
}

Am I missing something?

1 Like
2

I have just noticed that beta 1 was released yesterday.

Events work as expected after updating to beta 1.

2 Likes
3

Thanks for the info. I had same issue and verified Events now properly working in @ionic/angular 4.0.0-beta.1

npm i @ionic/angular@latest

4

Is anyone having troubles with events beta 8? I tried importing into a page (not lazy loaded) but get a no provider error as below:

16%20pm
Screen Shot 2018-09-16 at 3.33.16 pm.png1636×375 62.3 KB

Do I need to import anything into my app.module to make this work? My Ionic Info below

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.8
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (1 plugins total)

System:

   NodeJS : v8.9.4 (/usr/local/bin/node)
   npm    : 6.4.1
   OS     : macOS High Sierra
5

Ignore the above I had imported

import { Events } from 'ionic-angular'

not as

import { Events } from '@ionic/angular';

7

did you find the solution ? if yes then please share it.
I need it to update the left side menu bar. which is showing currently logged in user name.

8

I have found that in pretty much all situations if I need to pass data, it’s better to use a service as a go-between. Store the data in a service variable and then retrieve it where you need it. That’s what I did for a custom menu and it’s options. For your application @Thesurya9, that’s probably the best solution.

1 Like
9

File name: app.component.ts

user_name = ' ';

constructor(
        private platform: Platform,
        private splashScreen: SplashScreen,
        private statusBar: StatusBar,
        private router: Router,
        private menuCtrl: MenuController,
        private events: EventService
    ) {
this.events.dispatcher.subscribe(response => {
            if (response.auth) {
                this.user = response.auth;
                if (this.user.someting) {
                    this.someting = this.authService.base_url + this.user.someting.url;
                }
            }
            else {
                this.user_name = ' ';
            }
        });
    }
10

I have same issued, Did you fix it @jonmikelm ?