Angular 4/5/6 Global Variables

by

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 component’s template, you should inject Globals through the component’s 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 HelloComponent's 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 it’s 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. Let’s 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, it’s 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.

More Related Contents:

  1. How do I create a singleton service in Angular 2?
  2. Call child component method from parent class – Angular
  3. Property ‘value’ does not exist on type ‘EventTarget’
  4. How can I unit test a component that uses the Router in Angular?
  5. document.getElementById replacement in angular4 / typescript?
  6. Angular 2 Routing run in new tab
  7. How to implement SignIn with Google in Angular 2 using Typescript
  8. localStorage is not defined (Angular Universal)
  9. Angular 6: saving data to local storage
  10. Page is part of the declarations of 2 modules: Error in ionic build prod
  11. Property ‘controls’ does not exist on type ‘AbstractControl’ Angular 4 [duplicate]
  12. Angular 2/4 component with dynamic template or templateUrl
  13. Angular 12 source map is missing in browser
  14. Use nav.push with side menu in ionic 2
  15. Angular 5 – Copy to clipboard
  16. Pass config data using forRoot
  17. Angular 4 checkbox change value
  18. Debug & Run Angular2 Typescript with Visual Studio Code?
  19. Angular @ViewChild() error: Expected 2 arguments, but got 1
  20. Best way to import Observable from rxjs
  21. Ionic2/Angular2 – Read a custom config file
  22. Do I have to unsubscribe from ActivatedRoute (e.g. params) observables?
  23. rxjs/Subject.d.ts error : Class ‘Subject’ incorrectly extends base class ‘Observable’
  24. FormBuilder group is deprecated
  25. Property ‘toPromise’ does not exist on type ‘Observable’
  26. Angular 2 / 4 / 5 – Ahead-of-time compilation how to
  27. TypeError: Object prototype may only be an Object or null: undefined Angular 8
  28. Angular 4 ExpressionChangedAfterItHasBeenCheckedError
  29. Page transition animations with Angular 2.0 router and component interface promises
  30. Angular load external configuration before AppModule loads

Leave a Comment