How can I declare a global variable in Angular 2 / Typescript?

ID : 20367

viewed : 20

Tags : typescriptangulartypescript

Top 5 Answer for How can I declare a global variable in Angular 2 / Typescript?

vote vote

99

Here is the simplest solution w/o Service nor Observer:

Put the global variables in a file an export them.

// // ===== File globals.ts     // 'use strict';  export const sep='/'; export const version: string="22.2.2";     

To use globals in another file use an import statement: import * as myGlobals from 'globals';

Example:

//  // ===== File heroes.component.ts     // import {Component, OnInit} from 'angular2/core'; import {Router} from 'angular2/router'; import {HeroService} from './hero.service'; import {HeroDetailComponent} from './hero-detail.component'; import {Hero} from './hero'; import * as myGlobals from 'globals'; //<==== this one (**Updated**)  export class HeroesComponent implements OnInit {     public heroes: Hero[];     public selectedHero: Hero;     //      //     // Here we access the global var reference.     //       public helloString: string="hello " + myGlobals.sep + " there";           ...          }     } 

Thanks @eric-martinez

vote vote

89

I like the solution from @supercobra too. I just would like to improve it slightly. If you export an object which contains all the constants, you could simply use es6 import the module without using require.

I also used Object.freeze to make the properties become true constants. If you are interested in the topic, you could read this post.

// global.ts   export const GlobalVariable = Object.freeze({      BASE_API_URL: 'http://example.com/',      //... more of your variables  }); 

Refer the module using import.

//anotherfile.ts that refers to global constants import { GlobalVariable } from './path/global';  export class HeroService {     private baseApiUrl = GlobalVariable.BASE_API_URL;      //... more code } 
vote vote

78

A shared service is the best approach

export class SharedService {   globalVar:string; } 

But you need to be very careful when registering it to be able to share a single instance for whole your application. You need to define it when registering your application:

bootstrap(AppComponent, [SharedService]); 

But not to define it again within the providers attributes of your components:

@Component({   (...)   providers: [ SharedService ], // No   (...) }) 

Otherwise a new instance of your service will be created for the component and its sub-components.

You can have a look at this question regarding how dependency injection and hierarchical injectors work in Angular 2:

You should notice that you can also define Observable properties in the service to notify parts of your application when your global properties change:

export class SharedService {   globalVar:string;   globalVarUpdate:Observable<string>;   globalVarObserver:Observer;    constructor() {     this.globalVarUpdate = Observable.create((observer:Observer) => {       this.globalVarObserver = observer;     });   }    updateGlobalVar(newValue:string) {     this.globalVar = newValue;     this.globalVarObserver.next(this.globalVar);   } } 

See this question for more details:

vote vote

62

See for example Angular 2 - Implementation of shared services

@Injectable()  export class MyGlobals {   readonly myConfigValue:string = 'abc'; }  @NgModule({   providers: [MyGlobals],   ... })  class MyComponent {   constructor(private myGlobals:MyGlobals) {     console.log(myGlobals.myConfigValue);   } } 

or provide individual values

@NgModule({   providers: [{provide: 'myConfigValue', useValue: 'abc'}],   ... })  class MyComponent {   constructor(@Inject('myConfigValue') private myConfigValue:string) {     console.log(myConfigValue);   } } 
vote vote

50

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){     } } 

Note: You can add Globals service provider directly to the module instead of the component, and you will not need to add as a provider to every component in that module.

@NgModule({     imports: [...],     declarations: [...],     providers: [ Globals ],     bootstrap: [ AppComponent ] }) export class AppModule { } 

Top 3 video Explaining How can I declare a global variable in Angular 2 / Typescript?

Related QUESTION?