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
– Suraj Rao, Commented Jan 10, 2018 at 5:44
Thank you, I added the respective part :) So what am I doing wrong? — refle
– refle, Commented Jan 11, 2018 at 14:57
Are you able to console log the value? And you have a typo in app.html.. missed a " — Suraj Rao
– Suraj Rao, Commented Jan 11, 2018 at 15:11
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
– refle, Commented Jan 11, 2018 at 16:37

refle · Accepted Answer · 2018-02-04 14:55:47Z

3

Thank you all for your help. I actually solved the whole thing by putting all the data arrays and respective functions in a provider. Like this all data and methods are available to all pages. USE PROVIDERS - it makes everything so much easier and simpler.

answered Feb 4, 2018 at 14:55

refle

5933 gold badges6 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JGoodgive · Accepted Answer · 2018-01-18 22:00:24Z

2

Injectors can be lazily loaded async and thus there are times where there might be more than 1 instance of the injectable beacuse there are more than one injector. See here and here.

Perhaps this applies to you.

answered Jan 18, 2018 at 22:00

JGoodgive

1,12511 silver badges21 bronze badges

Comments

JGoodgive · Accepted Answer · 2018-01-18 22:12:29Z

1

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?

answered Jan 18, 2018 at 22:12

JGoodgive

1,12511 silver badges21 bronze badges

5 Comments

JGoodgive Over a year ago

Why am I getting down voated? Please explain.

Robin Dijkhof Over a year ago

Using a singleton is ridiculous. That is what a service is for.

JGoodgive Over a year ago

What exactly makes it ridiculous? If something is really needed in all pages why not make it available globally, like an application state is? The benifit of injecting any thing is really only archieved when using interfaces which we are not. So we still have coupling between classes.

Robin Dijkhof Over a year ago

Making something globally available can be done with a service.

JGoodgive Over a year ago

Yes but an injectable service is only motivated when it is not an ambient functionality, we have need of lazy loading and/or we are using interfaces to facilitate testability and lowering the coupling of modules. In this case we are talking about ambient functionality without interfaces in which case none of that is applicable and we should be just fine with a singleton, which also can be lazily loaded since we use the constructor as the getter of the instance. A quick google gives me this which seem to agree: enterprisecraftsmanship.com/2016/05/03/…

halfer · Accepted Answer · 2019-09-09 20:51:29Z

0

If you want to use a global variable, it would be best to work with ionic storage module.

See here: https://ionicframework.com/docs/storage/

If you rewrite yourself the AR provider, then not only can you access it globally (if you import he provider in one of your pages), but the saved data survives closing and opening the app.

Also notice that the get(key) method returns a promise (async). So you want to do something as

getRoll().then((data)=> {
 // your code
});

As you are a beginner, you might want to read about asynchronous code first.

PS: As I read from your answers above, you don't know how to console log. Just write console.log("") in your code and it will be put out in your terminal. I recommend watching the Ionic Crash Course on Youtube from the Ionic team.

edited Sep 9, 2019 at 20:51

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Jan 17, 2018 at 9:12

J. Hesters

15k36 gold badges156 silver badges272 bronze badges

1 Comment

mbuechmann Over a year ago

Storage is intended to save data persistently, so that it can be restored after an app has been shut down and restarted. This is a very bad fit if you just want to share data between some pages.

Collectives™ on Stack Overflow

Update global variable in ionic 3

4 Answers 4

Comments

Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related