Update global variable in ionic 3

Question

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:

First I define:

@Injectable()
export class AR {

 public roll: FR;

 constructor() {
   this.roll = new FR("test");
 } 

 set_roll(_roll) {
    this.roll = _roll;
 }

 get_roll() {
    return this.roll;
 }

}

Then I add the class as a provider in app.module.ts.

import { AR } from ...
@NgModule({
  ...
 providers: [ AR, ...]
 })

In app.compontents.ts I define a function:

export class MyApp {
rootPage:any = HomePage;

constructor(public ar: AR) {

  platform.ready().then(() => {
    ...
  }

}

activate(roll){
    this.ar.set_roll(roll);
   }

}

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":

<ion-content>
    <ion-list>
          <ion-item *ngFor="let i of myArray (click)="activate(i)">
   </ion-list>
</ion-content>

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.

It should be printed in another page:

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();
    }

(get_rollname is a function of the AR class and simply returns a string.)

In the respective HTML:

 <ion-footer>
  <div> {{ar_name}} </div>
 </ion-footer>

What am I doing wrong?

Edit:

export class FR {

    private rollname: string; 

    constructor(rollname: string) {
      this.rollname = rollname
    }

    set_rollname(newName: string) {
       this.rollname = newName;
    }

    get_rollname() {
       return this.rollname;
    }

}

can you add the code where you are actually showing the value in html? which component is it? — Suraj Rao
Thank you, I added the respective part :) So what am I doing wrong? — refle
Are you able to console log the value? And you have a typo in app.html.. missed a " — Suraj Rao
how can I do it without "innerhtml"?? how do i get the value? and i still have to figure out where the consol log is written :D - i am still a newbe — refle

JGoodgive JGoodgive · Accepted Answer · 2018-01-18T22:12:29

Another way might be to simple make the class a singleton.

class A {
    static instance = null;
    constructor() {
        if(A.instance) return A.instance;
        A.instance = this;
    }
}

I have not tried it with thie angular injectors but I am curious if it would work?

Update global variable in ionic 3

4 Answers