Events removed in Ionic 5
Tags: ionic, angular, typescript, javascript
Published: 2023-01-15 08:23:52

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,

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3bgvqkpl8otwe0pc3w0.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/253fbrcalrxhlpyxslk9.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucnor0fcrrvblbr1cm66.png)

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/re6ejaudke2tjkgjbdex.png)

Happy Morr n Morrr coding!

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