Using Events in Ionic to Pass Data & Messages Between Pages

Events in Ionic is a pub-sub system that can be used to pass messages across

different components and pages. Here we’ll go over a simple example

where a page publishes an event and a second page subscribes to that

event. This way, data can easily be passed between the two.

Injecting the Events Service

The first step in getting the event system to work is to import and inject

the Events service into both the sending and the receiving pages:

page1.ts

import { Component, Events } from 'ionic-angular';

@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})
export class Page1Page {
  constructor(public events1: Events) {}
}

page2.ts

import { Component, Events } from 'ionic-angular';

@Component({
  selector: 'page-page2',
  templateUrl: 'page2.html'
})
export class Page2Page {
  constructor(public events2: Events) {}
}

Here we named the injected instances events1 and events2 for clarity, but

they can both be injected using the same name since each instance is part of

a different page class.

Publishing & Subscribing to Events

Now that we have imported and injected the Events service into both pages

we can start publishing and subscribing to events using the

service’s publish and subscribe methods.

On Page1, we’ll publish a message when a button is pressed:

page1.ts

handleClick(){
  this.events1.publish('my-message', '👋 Hello from page1!');
}

Then on page 2 we’ll subscribe to receive messages published using the my-message key (called a topic in Ionic):

page2.ts

constructor(public events2: Events){
  this.events2.subscribe('my-message', (data) =>{
    console.log(data); // 👋 Hello from page1!
  });
}

As soon as the event is published and page2 is initialized, the subscribe

event will be triggered and execute the code with the data being passed.

Note that the data sent using publish doesn’t have to be a string and can just

a well be an object.

Practical Application

There are many practical applications to use the event system. For example,

I’ve used it to pop back to a page using the navController while also

updating some information on the page that gets popped into.

Normally, when navigating to a page using navController’s push method,

we can pass data as navParams, but the pop method doesn’t have such

capability, so the event pub-sub service comes-in really handy.

Take a look at this mini application for instance:

game.ts

import { Component, Events } from 'ionic-angular';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-game',
  templateUrl: 'game.html'
})
export class GamePage {
  constructor(
    public events: Events,
    public navController: NavController
  ) {
    this.events.subscribe('stats', statsData => {
      console.log(statsData);
    });
  }

  gameEnded() {
    this.navController.push(ShowWinnerPage);
  }
}

show-winner.ts

import { Component, Events } from 'ionic-angular';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-show-winner',
  templateUrl: 'show-winner.html'
})
export class ShowWinnerPage {
  constructor(
    public events: Events,
    public navController: NavController
  ) {}

  backButtonPressed(someData) {
    this.events.publish('stats', someData);
    this.navController.pop();
  }
}

Unsubscribing

The events service in the GamePage class will continue to be subscribed to

receive messages for the life of the application unless it is unsubscribed

using something like this:

game.ts

private unsubscribeToEvents() {
  this.events.unsubscribe('stats', () => {
    console.log('Unsubscribed!');
  });
}