Angular4/Ionic3 How to make a global variable

Question

I'm working in ionic3 app and I have a lot of services and functions using some special variables like:

let apiUrlPublic = 'http://localhost:8080/';

let apiUrl = 'http://localhost:9999/api/';

So I want to make those 2 variables global, like create one declaration and just call url by name.

Thanks in advance

Possible duplicate of What is the best way to declare a global variable in Angular 2 / Typescript — bugs
– bugs, Commented Apr 19, 2018 at 12:24

Prasheel · Accepted Answer · 2018-04-19 12:42:34Z

1

You can define a service in shared directory of you application. and wherever you want to use these values you can simply just inject that service in the constructor and access the variable.

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

@Injectable()
export class ExampleProvider {
  public urlOne: string = '....YOUR URL HERE....';
  public urlTwo = '....YOUR URL HERE....';

  constructor() {
  }
  getUrlOne() {
    return this.urlOne;
  }

 getUrlTwo() {
        return this.urlTwo;
      }

}

answered Apr 19, 2018 at 12:42

Prasheel

1,0207 silver badges23 bronze badges

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

5 Comments

Isaac Obella Over a year ago

This is right, however if you expect the global variable to change , then the best way is to make the global variable an Observable using the BehaviourSubject

Prasheel Over a year ago

In this case, I think these URLs are not going to change.

Eliseo Over a year ago

@Prashell, if your variables are public, you needn't use a function, just ExampleProvider.urlOne give you the value

Prasheel Over a year ago

I agree with the point @Eliseo, but what if I want to use them in the html file ?

Eliseo Over a year ago

if you want to use in a component, you can NOT use directly {{ExampleProvider.urlOne}}, you must add a getter in your component.ts: get urlOne(){return ExampleProvider.urlOne}, and put in your html {{urlOne}}

Ragnar Lodbrok · Accepted Answer · 2018-04-19 16:00:29Z

0

I got a simple solution, I create a new file:

globalVariables.ts

    export const GV = Object.freeze({
    sep: '/',
    version: '1.0',
    apiUrlPublic: 'http://localhost:8080/',
    apiUrl: 'http://localhost:9999/api/',
});

And when I want use any global variable I import file like that:

import { GV } from '../../app/globalVariables';

answered Apr 19, 2018 at 16:00

Ragnar Lodbrok

1631 gold badge3 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular4/Ionic3 How to make a global variable

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related