Table of Contents
URL: https://www.progressiverobot.com/ionic-events/
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:
[label page1.ts]
import { Component, <^>Events<^> } from 'ionic-angular';
[label page2.ts]
import { Component, <^>Events<^> } from 'ionic-angular';
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:
[label 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):
[label 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:
[label 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);
});
}
[label 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
) {}
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:
[label game.ts]
private unsubscribeToEvents() {
this.events.unsubscribe('stats', () => {
console.log('Unsubscribed!');
});
}
