Events removed in Ionic 5

Gone were the days where you were able to simply publish something like this from everywhere in your ionic app

this.events.publish('user:created', user, Date.now());

and listening to them by subscribing to the events by the given id

events.subscribe('user:created', (user, time) => { 
    console.log('Welcome', user, 'at', time);
  });

you ionic start your new app, created your first few components and by the time you were ready to have them communicate with each other realized,

the Events you were used to using, is not there anymore!. According to the changelog,

Events
The @ionic/angular Events service has been removed.
Use "Observables" for a similar pub/sub architecture: https://angular.io/guide/observables
Use "Redux" for advanced state management: https://ngrx.io

read more here : https://github.com/ionic-team/ionic-framework/blob/45d03baf981d0e10eb1fe689908532adef2ba31d/BREAKING.md#events-1

So now what?
Easy! lets go with something I would call as a notification based service. Lets build something simple.

Go ahead and use the ionic cli to create a new application, in this example I am using the tabs template. Here is what we will be building

We will be creating 2 components inside of Tab1 tab, name it

• tab-info-component
• tab-info-entry-component

we will have an input in tab-info-entry-component that will change the value of the tab-info-component on top when the input loses focus. Simple as that.

The structure should be something like this

Lets start by adding the controls in our components html and their binding property

tab-info.component.html
<h2>Tab-info Component</h2>
<ion-label>Info</ion-label>
<ion-textarea [(ngModel)]="text">

tab-info.component.ts
text = '...';
constructor() { }
ngOnInit() {}

tab-info-entry.html
<h2>Tab-info-entry Component</h2>
<ion-item>
<ion-label>Enter Info</ion-label>
<ion-input placeholder="Info" [(ngModel)]="info" (ionBlur)="onBlur()"></ion-input>
</ion-item>

tab-info-entry.ts
info = '';
constructor() { }
ngOnInit() {}
onBlur(){
console.log('info')
}

at this point, no communication is established yet. So lets go ahead and create a service called tabInfoEntryNotificationService for that purpose. This service will do 2 things, provide a method to notify other component consuming this service, and also returns a subscribeable subject to listen to the notification.

I will go an extra step now, to add an interface that will provide the blueprint of that, since logically, we will be having a lot of this notification service for each different components.

icomponent-notification.interface.ts
import { Subject } from "rxjs";
export interface IComponentNotification {
notify(data: any): void;
notification(): Subject<any>;
}

then finally create the service

info-entry-notification.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { IComponentNotification } from './icomponent-notification.interface';
@Injectable({
providedIn: 'root'
})
export class InfoEntryNotificationService implements IComponentNotification {
constructor() { }
private subject = new Subject<any>();
notify(data: any): void {
this.subject.next(data);
}
notification(): Subject<any> {
return this.subject
}
}

Now in each of the components, inject the service and make use of it.

tab-info-entry.component.ts
constructor(private infoEntryNotificationService:
InfoEntryNotificationService) { }
ngOnInit() {}
onBlur(){
this.infoEntryNotificationService.notify({
text: this.info
});
}

tab-info.component.ts
text = '...';
constructor(private infoEntryNotificationService: InfoEntryNotificationService) { }
ngOnInit() {
this.infoEntryNotificationService.notification().subscribe((data) => {
this.text = data.text;
})
}

Now everytime you change the input value in the 'Enter Info' field, the value will be reflected at the 'Info' textarea field and this was communicated via the notification service.

Happy Morr n Morrr coding!

Github : https://github.com/captainmor/ionic6-service-based-component-notification.git