title: Global variables Ionic 2
body: <p>I'm having some difficulties with Ionic 2 and setting up global variables. The structure of my app is as follows:</p>
  
  <pre><code>Main app
    |
    |--- Page1 (Info)
    |--- Page2 (Map)
    |--- Page3 (List)
           |
           |--- ItemTabsPage
                  |
                  |---tab1
                  |---tab2
                  |---tab3
  </code></pre>
  
  <p>My intention is to show a list in <em>Page3</em>, and once one item is selected, to show additional information in tabs.</p>
  
  <p>I send the information from Page 3 to the page with the tabs using:</p>
  
  <pre><code>itemTapped(event, item) {
      this.nav.push(ItemTabsPage, {
        item: item
      });
    }
  </code></pre>
  
  <p>The problem is that I can't do the same to send the info to the child tabs. I would like to show different information depending on which item is selected. I have tried defining an injectable <em>globalVars.js</em> to store the value in a variable:</p>
  
  <pre><code>import {Injectable} from 'angular2/core';
  
  @Injectable()
  export class GlobalVars {
  
    constructor(myGlobalVar) {
      this.myGlobalVar = "";
    }
  
    setMyGlobalVar(value) {
      this.myGlobalVar = value;
    }
  
    getMyGlobalVar() {
      return this.myGlobalVar;
    }
  
  }
  </code></pre>
  
  <p>and then updating the code of itemTapped in the list as follows:</p>
  
  <pre><code>itemTapped(event, item) {
          this.nav.push(ItemTabsPage, {
            item: item
          });
          this.globalVars.setMyGlobalVar(item);
        }
  </code></pre>
  
  <p>However, I always get the same error:</p>
  
  <pre><code>Uncaught EXCEPTION: Error during evaluation of "click"
  ORIGINAL EXCEPTION: TypeError: Cannot read property 'setMyGlobalVar' of undefined
  </code></pre>
  
  <p>The code for <em>page3</em> is:</p>
  
  <pre><code>import {Page, NavController, NavParams} from 'ionic-angular';
  import {ItemService} from '../services/ItemService';
  import {ItemTabsPage} from '../item/item-tabs/item-tabs';
  import {GlobalVars, setMyGlobalVar} from '../../providers/globalVars';
  
  import {Http} from 'angular2/http';
  import 'rxjs/add/operator/map';
  
  @Page({
    templateUrl: 'build/pages/item-list/item-list.html',
    providers: [ItemService]
  })
  
  export class ItemListPage {
  
    static get parameters() {
      return [[NavController], [NavParams], [Http]];
    }
  
    constructor(nav, navParams, http, globalVars) {
      this.nav = nav;
      // If we navigated to this page, we will have an item available as a nav param
      this.selectedItem = navParams.get('item');
      this.http = http;
      //this.items = null;
      this.globalVars = globalVars;
  
  
      this.http.get('https://website-serving-the-info.com/items.json').map(res =&gt; res.json()).subscribe(data =&gt; {
          this.items = data.items;
          },
        err =&gt; {
            console.log("Oops!");
      });
  
    }
  
    itemTapped(event, item) {
      this.nav.push(ItemTabsPage, {
        item: item
      });
      this.globalVars.setMyGlobalVar(item);
    }
  }
  </code></pre>
  
  <p>Anyone have any suggestion? My Ionic installation is:</p>
  
  <pre><code>Cordova CLI: 6.1.1
  Gulp version:  CLI version 3.9.1
  Gulp local:   Local version 3.9.1
  Ionic Framework Version: 2.0.0-beta.4
  Ionic CLI Version: 2.0.0-beta.25
  Ionic App Lib Version: 2.0.0-beta.15
  OS: Distributor ID: LinuxMint Description:  Linux Mint 17.3 Rosa 
  Node Version: v5.11.0
  </code></pre>