typescript – Angular 4/5/6 Global Variables

You can access Globals entity from any point of your App via Angular dependency injection. If you want to output Globals.role value in some components template, you should inject Globals through the components constructor like any service:

// hello.component.ts
import { Component } from @angular/core;
import { Globals } from ./globals;

@Component({
  selector: hello,
  template: The global role is {{globals.role}},
  providers: [ Globals ] // this depends on situation, see below
})

export class HelloComponent {
  constructor(public globals: Globals) {}
}

I provided Globals in the HelloComponent, but instead it could be provided in some HelloComponents parent component or even in AppModule. It will not matter until your Globals has only static data that could not be changed (say, constants only). But if its not true and for example different components/services might want to change that data, then the Globals must be a singleton. In that case it should be provided in the topmost level of the hierarchy where it is going to be used. Lets say this is AppModule:

import { Globals } from ./globals

@NgModule({
  // ... imports, declarations etc
  providers: [
    // ... other global providers
    Globals // so do not provide it into another components/services if you want it to be a singleton
  ]
})

Also, its impossible to use var the way you did, it should be

// globals.ts
import { Injectable } from @angular/core;

@Injectable()
export class Globals {
  role: string = test;
}

Update

At last, I created a simple demo on stackblitz, where single Globals is being shared between 3 components and one of them can change the value of Globals.role.

I use environment for that. It works automatically and you dont have to create new injectable service and most usefull for me, dont 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 dont 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)

typescript – Angular 4/5/6 Global Variables

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.

typescript – Angular 4/5/6 Global Variables

typescript – Angular 4/5/6 Global Variables

Leave a Reply Cancel reply