The Events provider is deprecated - ionic 4

There is a warning about the Events Provider that is deprecated.
Saw the angular.io guide about it but didn’t get how can I achieve the same…

When using events I can do it like this:

//Emitter component
this.events.publish('user:logged');
//Listener component
this.events.subscribe('user:logged', () => {
  //do something
});

Is there a simple way to achieve this with observable?
I got little knowledge about observables…

Hi ahmadkisany, thanks for your answer.
Is it using observables? It looks just a little different from using the events provider.

Wow it is kind of the same…
I am using ionic Events Provider (https://ionicframework.com/docs/v3/api/util/Events/) to emit if the user has logged, refresh his info and show some menu itens that is only for logged users.

IMHO anything you can do with Events can be done better with Observables.

Hi, what I am struggling is to listen app wide events, didn’t found any example.
Observables are really new for me.

As long as you’re not doing anything weird (such as putting providers on the decorators of your Components or in submodules), Angular DI makes it so that any time anybody asks for a AuthService, they’ll get the same one. So you can use the pattern described in this post to propagate changes in authentication status anywhere in your app that go beyond just “user is logged in or not” to include strongly-typed information such as a user profile.

1 Like

Wow nice example! Thanks!

USE EVENTS AS YOU USED TO IN IONIC 3.
You just have to import this service/provider in a page you want to use it.
Reference
https://git.furworks.de/opensourcemirror/Ionic/commit/e5f2a18230f3ca3017f0302fb57ef275d0f63a8b


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

export type EventHandler = (...args: any[]) => any;
@Injectable({
  providedIn: 'root',
})
export class Events {
  private c = new Map<string, EventHandler[]>();

  constructor() {
  //   console.warn(`[DEPRECATION][Events]: The Events provider is deprecated and it will be removed in the next major release.
  // - Use "Observables" for a similar pub/sub architecture: https://angular.io/guide/observables
  // - Use "Redux" for advanced state management: https://ngrx.io`);
  }
  /**
   * Subscribe to an event topic. Events that get posted to that topic will trigger the provided handler.
   *
   * @param topic the topic to subscribe to
   * @param handler the event handler
   */
  subscribe(topic: any, ...handlers: EventHandler[]) {
    let topics = this.c.get(topic);
    if (!topics) {
      this.c.set(topic, topics = []);
    }
    topics.push(...handlers);
  }

  /**
   * Unsubscribe from the given topic. Your handler will no longer receive events published to this topic.
   *
   * @param topic the topic to unsubscribe from
   * @param handler the event handler
   *
   * @return true if a handler was removed
   */
  unsubscribe(topic: string, handler?: EventHandler): boolean {
    if (!handler) {
      return this.c.delete(topic);
    }

    const topics = this.c.get(topic);
    if (!topics) {
      return false;
    }

    // We need to find and remove a specific handler
    const index = topics.indexOf(handler);

    if (index < 0) {
      // Wasn't found, wasn't removed
      return false;
    }
    topics.splice(index, 1);
    if (topics.length === 0) {
      this.c.delete(topic);
    }
    return true;
  }

  /**
   * Publish an event to the given topic.
   *
   * @param topic the topic to publish to
   * @param eventData the data to send as the event
   */
  publish(topic: string, ...args: any[]): any[] | null {
    const topics = this.c.get(topic);
    if (!topics) {
      return null;
    }
    return topics.map(handler => {
      try {
        return handler(...args);
      } catch (e) {
        console.error(e);
        return null;
      }
    });
  }
}
2 Likes