title: Update global variable in ionic 3
body: <p>I am new to ionic, angular and typescript. I have a variable "ar: AR" that I need in all pages, so I thought it is a good idea to make it a global variable. I do it like this:</p>
  
  <p>First I define:</p>
  
  <pre><code>@Injectable()
  export class AR {
  
   public roll: FR;
  
   constructor() {
     this.roll = new FR("test");
   } 
  
   set_roll(_roll) {
      this.roll = _roll;
   }
  
   get_roll() {
      return this.roll;
   }
  
  }
  </code></pre>
  
  <p>Then I add the class as a provider in app.module.ts.</p>
  
  <pre><code>import { AR } from ...
  @NgModule({
    ...
   providers: [ AR, ...]
   })
  </code></pre>
  
  <p>In app.compontents.ts I define a function:</p>
  
  <pre><code>export class MyApp {
  rootPage:any = HomePage;
  
  constructor(public ar: AR) {
  
    platform.ready().then(() =&gt; {
      ...
    }
  
  }
  
  activate(roll){
      this.ar.set_roll(roll);
     }
  
  }
  </code></pre>
  
  <p>and in the app.html I define a button which should set this variable "ar" to a new value which is stored in an array named "myArray": </p>
  
  <pre><code>&lt;ion-content&gt;
      &lt;ion-list&gt;
            &lt;ion-item *ngFor="let i of myArray (click)="activate(i)"&gt;
     &lt;/ion-list&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>However, the value of the global variable does not change. It always stays the inital value "test" defined in the constructor of the AR class.</p>
  
  <p>It should be printed in another page: </p>
  
  <pre><code>import { AR } from ...;
  
  
  @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
  })
  export class HomePage {
  
      ar_name: string;
  
      constructor(..., public ar: AR) {
        this.ar_name = this.ar.get_roll().get_rollname();
      }
  </code></pre>
  
  <p>(get_rollname is a function of the AR class and simply returns a string.)</p>
  
  <p>In the respective HTML: </p>
  
  <pre><code> &lt;ion-footer&gt;
    &lt;div&gt; {{ar_name}} &lt;/div&gt;
   &lt;/ion-footer&gt;
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p>Edit: </p>
  
  <pre><code>export class FR {
  
      private rollname: string; 
  
      constructor(rollname: string) {
        this.rollname = rollname
      }
  
      set_rollname(newName: string) {
         this.rollname = newName;
      }
  
      get_rollname() {
         return this.rollname;
      }
  
  }
  </code></pre>