'Angular 4/5/6 Global Variables

I really struggle with creating global variables in my Angular 2 application.

So I have my file called globals.ts, which looks like this:

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


@Injectable()
export class Globals {

  var role = 'test';

}

And I want to use the variable role in my HTML view of my component like this:

{{ role }}

I already added the globals.ts file to my app.module.ts in the following way:

providers: [
  Globals
],

No matter what I did on this file, it just didn't work. What I don't want to do is to have to import the globals.ts file in every component manually, which is why I want to use the providers feature.

angular typescript

Solution 1:^[1]

I use environment for that. It works automatically and you don't have to create new injectable service and most usefull for me, don't need to import via constructor.

1) Create environment variable in your environment.ts

export const environment = {
    ...
    // runtime variables
    isContentLoading: false,
    isDeployNeeded: false
}

2) Import environment.ts in *.ts file and create public variable (i.e. "env") to be able to use in html template

import { environment } from 'environments/environment';

@Component(...)
export class TestComponent {
    ...
    env = environment;
}

3) Use it in template...

<app-spinner *ngIf='env.isContentLoading'></app-spinner>

in *.ts ...

env.isContentLoading = false

(or just environment.isContentLoading in case you don't need it for template)

You can create your own set of globals within environment.ts like so:

export const globals = {
    isContentLoading: false,
    isDeployNeeded: false
}

and import directly these variables (y)

Solution 2:^[2]

While all the other answers previously mentioned are correct. The Angular way would be is using either Pipes, Decorators or Components

If you simply want to display a string then use a component

Component

<Role></Role>

Decorator

If you want to do something like this:

<a href="/foo/{{userId}}/bar">Link</a>

You may want to implement your own decorator

<a [customHref]="[/foo/:userId/bar]">Link</a>

or if you use the built in router module with routerlink you could simply extend the RouterLink directive and implement your changes.

Pipe

somevariable = "this is my #:userId";

{{someVariable | applyglobals}}

And so on.

Solution 3:^[3]

I use environment variables in combination with other json files, i.e. to display build information and other stuff. That way, you can mix and/or re-use them in different environments.

// environment.ts, environment.prod.ts
export const environment = {
  
  ...
  appName: require('../../package.json').name,
  appVersion: require('../../package.json').version,

  ...
  globalX: require('../../globals.json').X,
  globalY: require('../../globals.json').Y,      
}

Usage:

import { environment } from './../environments/environment';

export class FooterComponent implements OnInit {

  appName = environment.appName;
  buildVersion = environment.appVersion;
  x = environment.globalX;
  y = environment.globalY;
}

Solution 4:^[4]

Not really recommended but none of the other answers are really global variables. For a truly global variable you could do this.

Index.html

<body>
  <app-root></app-root>
  <script>
    myTest = 1;
  </script>
</body>

Component or anything else in Angular

..near the top right after imports:

declare const myTest: any;

...later:

console.warn(myTest); // outputs '1'

Solution 5:^[5]

You can use the Window object and access it everwhere. example window.defaultTitle = "my title"; then you can access window.defaultTitle without importing anything.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Martin Slavkovsky
Solution 2	Playdome.io
Solution 3	Kurt Van den Branden
Solution 4	Post Impatica
Solution 5	Justice Addico

'Angular 4/5/6 Global Variables

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]