How to create global variables in angular ?

In this article, we will learn about the create global variables in Angular and how to use them. We will also see how to use them across the application by importing the file.

There are different ways to create global variables in angular. One way is to use the global constant file and import it any component or module .

Another way to create service or provider and inject it in component . This service can be inject to all components, directives, service, modules.

Why we need global variable in angular project?

We need global variable in angular project because they help us to communicate between different parts of our application. For example, we can use a global variable to store the current user’s information and then access that information anywhere in our application. Additionally, global variables can be used to share data between different angular modules.

Other usage can be site configuration like URLs, site descriptions etc.

Method of global variable in angular

There are two different ways to create global variables in angular. One way is to use the Global file and define the class, properties according to use. lets check the create global variables in angular method

Method 1 :

Let create a simple file app\globals\global-config.ts

export class GlobalConfig {
    public static environment: string = "LOCAL";
      
    public static user: object = {name:"",email:""};
    
    public static site: object = {url:"https://readerstacks.com",
                                  description:"Readerstacks to improve your coding skills"
                                  };
}

Now, you can use it in any component as follow app\app.component.ts

import { Component, OnInit } from '@angular/core';
import{ GlobalConfig } from './common/global-config';
   
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
    string env = GlobalConfig.environment;
  
    constructor() { 
        console.log(GlobalConfig.user);
    }
   
    ngOnInit() {
        console.log(this.env);
    }
}

Method 2 : Using the service

In this method we will create a service and most recommended method to use in angular

ng generate service config

Above code will create a service in src\app\config.service.ts or we can create manually

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

@Injectable({
  providedIn: 'root'
})
export class ConfigService {
   
  public static environment: string = "LOCAL";
      
  public static user: object = {name:"",email:""};
    
  public static site: object = {url:"https://readerstacks.com",
                                  description:"Readerstacks to improve your coding skills"
                                  };
  constructor() { }

  anyMethodToProcess(){
     this.user; 
  } 
}

Now, You can inject the service in new component or existing component and can use all the methods and properties of it.

import { Component } from '@angular/core';
import { ConfigService } from './config.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  title = 'Service Example';
  constructor(config:ConfigService){

    console.log(config.environment)
    console.log(config.anyMethodToProcess())


  }  
}

conclusion

Assuming you want a global variable in your Angular application, there are a few ways to go about this. The most common way is to Using the service. Another way is to use the Angular global class.

Both of these methods have their pros and cons, so it’s really up to you which one you choose. If you’re not sure, try using the service first and see how it works for you.