Publishing and Subscribing to Events in Ionic 2

Sooner or later when you’re building your mobile application you’ll probably want to fire an event in one component of your application and have that event handled or acted upon in another component.

In native iOS development you would probably handle this scenario either using the NSNotification class or the Delegate pattern. The former is loosely coupled and allows multiple listeners, the latter is more tightly coupled and allows just a single listener (I think).  In Android development you can use Listeners or perhaps use an event bus architecture such as EventBus or Oto.

In an Ionic 2 application we have an Events system which allows you to subscribe to events in one component that have been published in another component.  Like the NSNotifcation class in iOS this is a loosely coupled architecture and allows multiple listeners i.e component 1 can publish an event and components 2 and 3 can subscribe to it.

It’s incredibly simple to use.  In both the publishing and subscribing events you need to inject the Event class i.e :

import {Events} from ionic-angular;

In the component you wish to fire the event from simply publish it like this:

this.events.publish(‘myEvent);

and in the component you want to act on the event you subscribe to it i.e:

this.events.subscribe(‘myEvent’,() => {

// do something

});

The event can also take an object as a parameter e.g

let myParam = {

name: “Bruce”,

age: 100

}

this.events.publish(‘myEvent‘,myParam);

To handle this in the subscriber you would do something like:

this.events.subscribe(‘myEvent’,(object) => {

// do something with object

});

To read more about Events in Ionic 2 see the documentation here and also have a look at the excellent Conference app that the Ionic team have created and are constantly updating as they add new features to the framework.  In the Conference app, app.js subscribes to the login event fired by the UserData component.

 


I’m a mobile applications developer based in the UK, concentrating primarily on hybrid application development with Ionic and Ionic 2 but also with native development skills. Please visit www.crossplatformsolutions.co.uk for more information about me and how I may be able to help you with mobile application development, particularly with Ionic 2 but also with other mobile frameworks and technologies.  Thanks for visiting.

3 thoughts on “Publishing and Subscribing to Events in Ionic 2

  1. inki (@inki)

    This works very well and is really a nice feature but only in very simple and specific cases. I’ve found that using this across components (which I believe is the intent) within lifecycle hooks to be close to impossible (I only say “close” because I believe I may be overlooking something obvious, otherwise it is currently impossible.) Would you happen to have an example of unsubscribing from an event within a lifecycle hook such as ‘onPageWillLeave’?

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s