Angular2/Ionic2 where to define global variables?

Question

I am having tough time defining a global variable to be accessible in the whole app. The app is based on Ionic2 and Angular2.

I tried to many approaches but none worked. In some examples on SO I can't understand where to store the js file physically.

Exampe I tried: Example

The example you have given is how you would define a "global" variable in typescript. What are you struggling with? — Oliver Cooke
– Oliver Cooke, Commented Feb 26, 2017 at 9:49

Nico · Accepted Answer · 2017-02-26 11:47:31Z

2

Create Globals class in app/globals.ts:

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

Injectable()
export class Globals{
    VAR1 = 'value1';
    VAR2 = 'value2';
}

In your component:

import { Globals } from './globals';

@Component({
    selector: 'my-app',
    providers: [ Globals ],
    template: `<h1>My Component {{globals.VAR1}}<h1/>`
})
export class AppComponent {
    constructor(private globals: Globals){
    }
}

You can use your globals in the html with {{globals.VARIABLENAME}}

Do not add class Globals as provider

answered Feb 26, 2017 at 11:47

Nico

1543 silver badges17 bronze badges

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

1 Comment

fr00t Over a year ago

Note that this way it is possible to get multiple instances of the Globals class. Would be better to only declare the "Globals" once in app.module.ts providers

Collectives™ on Stack Overflow

Angular2/Ionic2 where to define global variables?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related