Tag Archives: events

Calling a function in app.component.ts from another component

Someone in the Ionic Slack technical-questions channel last night asked how you call functions in app.component.ts from another Page.  I was happy to help out.

The answer (well, the way I do this anyway) is to subscribe to an event in your app.component.ts and publish that event from the page you want to call the function from.

in app.component.ts :

import { Events } from 'ionic-angular';

constructor(public events: Events) {
events.subscribe('user:login', () => {
  this.loggedIn();
});
}

loggedIn() {
console.log("logged in");
}

 

in the calling Page:

import { Events } from 'ionic-angular';
constructor(public events: Events) {
}

logIn() {
events.publish('user:login');
}

 

The calling page fires the event which is subscribed to in app.component.  See the Ionic Conference app to see an example of event handling in app.component.ts.

Objects can also be passed as parameters with events like this which can be really handy.

For more info on Events see the official Ionic documentation here.

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.