Skip to content
Readerstacks logo Readerstacks
  • Home
  • Softwares
  • Angular
  • Php
  • Laravel
  • Flutter
Readerstacks logo
Readerstacks
How to create global variable in angular ?

How to create global variables in angular ?

Aman Jain, October 3, 2022March 16, 2024

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.

Related

Javascript Angular angularglobalservicevariable

Post navigation

Previous post
Next post

Related Posts

How to create a new project of angular ?

August 29, 2021September 12, 2021

Before start the article i would suggest you to read our article what is angular and installation process. To create a new angular app follow the below steps: Open the terminal or command line Go to the folder in which you want to create your new angular project Example: E:/angular…

Read More
Javascript How to get query string params in angular 12

How to get query string params in angular 12 ?

April 6, 2022October 4, 2022

In this tutorial i will show you to get the query string params in angular using ActivatedRoute. Angular completely works in different way from other javascript frameworks, Angular uses its own routing framework to land between the pages. Let’s quickly deep dive in to the topic and learn it. So…

Read More
Angular How to Use Interface in Angular with Example

How to Use Interface in Angular with Example?

August 6, 2022March 16, 2024

Interface in angular or in any programming languages is pattern which bind component or class to use same implementation across the modules. In this article we will cover the use of interface in angular with example. In Angular interface can be used on service, factory, component or any type of…

Read More

Aman Jain
Aman Jain

With years of hands-on experience in the realm of web and mobile development, they have honed their skills in various technologies, including Laravel, PHP CodeIgniter, mobile app development, web app development, Flutter, React, JavaScript, Angular, Devops and so much more. Their proficiency extends to building robust REST APIs, AWS Code scaling, and optimization, ensuring that your applications run seamlessly on the cloud.

Categories

  • Angular
  • CSS
  • Dart
  • Devops
  • Flutter
  • HTML
  • Javascript
  • jQuery
  • Laravel
  • Laravel 10
  • Laravel 11
  • Laravel 9
  • Mysql
  • Php
  • Softwares
  • Ubuntu
  • Uncategorized

Archives

  • June 2025
  • May 2025
  • April 2025
  • October 2024
  • July 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • July 2023
  • March 2023
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Recent Posts

  • The Resilience of Nature: How Forests Recover After Fires
  • Understanding Laravel Cookie Consent for GDPR Compliance
  • Understanding High Vulnerabilities: A Critical Overview of the Week of May 12, 2025
  • Installing a LAMP Stack on Ubuntu: A Comprehensive Guide
  • Understanding High Vulnerabilities: A Deep Dive into Recent Security Concerns
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version