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:‘myEvent);

and in the component you want to act on the event you subscribe to it i.e:‘myEvent’,() => {

// do something


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

let myParam = {

name: “Bruce”,

age: 100


To handle this in the subscriber you would do something like:‘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 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.

5 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’?

  2. Dhaval

    Interesting read. Would like to know how to handle multiple events that can occur simultaneously. E.g say there is notification event that may come when the app is not on. And there is a login event that may be triggered as soon as the app is opened. Thus clicking on a notification will trigger both the events

    Thanks in advance
    Dhaval Shah


Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s