how to make global variable and functions which can be accessible in all the components in angular 4

Question

I am struggling with global variables as I want some variables which I need to access in all the components so what should i do in angular 4 .

I've tried something like this:

Created one file with the name of global.ts and made a class with the name GlobalComponent something like this

export class GlobalComponent {
  globalVar:string = "My Global Value";
}

and am using it on HeaderComponent by importing and making instance and it's working fine but this is very long process to import in each and every files to get it available.

So I want it to be available on all the components without importing it.

Is there any way or trick to achieve this? Any suggestion would be appreciated :)

Answer 1

As @bgraham is suggesting, it is definitely better to let angular injector to instantiate the service.

But you could also export just a simple object with key-value pairs, including functions. Then you can simply import it and use it (without the instantiation part).

globals.ts file:

export const GLOBALS = {
  globalVar: 'My Global Value',
  globalFunc: () => alert('123')
};

your.component.ts file:

import { GLOBALS } from './globals.ts';

console.log(GLOBALS.globalVar);
GLOBALS.globalFunc();

Btw I don't think there is a way how to get rid of the import statement - that is part of how typescript works...

Answer 2

I don't think what you want to do is possible and it's probably not a good idea.

The import statements are how webpack (or other bundlers) are able to build a tree to figure out which files to include. So it might be tricky to get global files built into all your bundles.

Also I would add, I'm not sure just importing the static file is the way to go either. It's kind of quick and dirty, which maybe is what you want I guess, but for production apps I would recommend making an angular service and injecting it.

export class GlobalVariablesService {
  globalVar:string = "My Global Value";
}

This way you can mock these for unit tests or potentially pass in different variables depending on your changing needs in the future.

If you need these to update and push that into lots of components throughout your app, you might look into Redux. Its pretty handy for that kind of thing.

Sorry, perhaps not the answer you were hoping for

Answer 3

Simply create constant file - constant.ts under src folder.

Now import constant.ts file whenever you require parameter to be called

It will look like so

export const constant = { COSNT_STRING : 'My Global Value', }

how to use constant:

1) Import file. 2) constant.CONST_STRING

Also this is a good practice from future prospective, if you want to modify response just made change in one file not in 800 files.