Global variables in Ionic 2

[Updated for the latest version of Ionic 2]

I’ve seen a couple of questions in forums recently relating to global variables in Ionic 2 applications and what the “best practice” is.  In my Ionic 2 apps I like to handle global variables by injecting some sort of shared-data service into any components that need it.

import {Injectable} from '@angular/core';

export class GlobalVars {
  constructor() {
    this.myGlobalVar = "";

  setMyGlobalVar(value) {
    this.myGlobalVar = value;

  getMyGlobalVar() {
    return this.myGlobalVar;


in app.module.ts I would then import the service:

import {GlobalVars} from ./providers/globalVars;

and specify it as a provider:

providers: [GlobalVars]

and then it can be injected and used in any component.  To see this in action, take a look at the Conference app that the Ionic team are building as a reference project for Ionic 2.  Take a look at the user-data provider and see how they use that across the application to maintain data (such as the favourites list).

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.

17 thoughts on “Global variables in Ionic 2

  1. Simon J S Liu

    I got it, it only set provider in app.module.ts, not in other pages.

    Every time it set in provider, it will be init again.

  2. willburt

    Thanks for this Richard, it’s very useful 🙂 One small thing that I noticed that has probably changed because of an RC update is that the angluar/core reference should now be

    import { Injectable } from ‘@angular/core’;

    instead of

    import { Injectable } from ‘angular/core’;

    The “@” is the difference.

  3. TL

    Can anyone tell me how to use this new provider in any component?
    How can I inject this singleton?

      1. TL

        Thanks for reply. I already checked this… But i was confused because this UserData provider is imported on each page. In your comments you describe that is only has to define ones on app.module and then only inject it on all pages.
        But ok…
        So I have to import this provider in all pages where I need to use it?

      2. richardshergold Post author

        Yes, you need to import it and inject it on each page but as long as you only specify it as a provider at the top level it will be a singleton (you could also specify it as a provider at the component level but that would result in a new instance being generated)

  4. Jose Yeste

    Nose if it is ok but in my case create a singleton class in src / app / conf.ts and import it where you want to retrieve the variables, what difference is there in making it the way you say?

    * Clase Config singlenton
    * author: Jose Yeste
    export class Config {
    private rol_usuario = 0;
    private token = “”;
    private static bfInternal: Config;

    private constructor(){ }

    static get Instance(){
    if(Config.bfInternal == undefined){
    Config.bfInternal = new Config();
    return Config.bfInternal;
    public setRol_usuario(rol:number){
    public getRol_usuario(){
    return this.rol_usuario;
    public setToken(token:string){
    public getToken(){
    return this.getToken;


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