How to Define Global Variable in Angular 16?

Hey Folks,

Here, I will show you how to work angular 16 global variable for all components. I explained simply about global variable in angular 16. This article will give you a simple example of dynamic global variable in angular 16. It's a simple example of angular 16 access global variable.

We always need to declare a global variable file for our angular 16 application because we can set some global variables there like site title, API URL, etc so you can easily access anywhere in our application easily.

So, in this example, we will create a GlobalConstants file for adding global variables in our application. in that file I added two variables appURL and appTitle. I will access those variable values in my AppComponent file. you can also access all the components as you want.

Now, bellow we will create GlobalConstants as created bellow and We will use that variable as like used in the AppComponent file.

src/app/common/global-constants.ts

export class GlobalConstants {
  
    public static appURL: string = "https://itsolutionstuff.com/";  
    public static appTitle: string = "This is example of ItSolutionStuff.com";
    public static appLogo: string = "assets/images/logo.png";
    public static appEmail: string = "example@gmail.com";
  
}

src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import{ GlobalConstants } from './common/global-constants';
     
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  
    title = GlobalConstants.appTitle;
    url = GlobalConstants.appURL;
    email = GlobalConstants.appEmail;
    
    constructor() {}
     
    ngOnInit() {}
}

Now you can check this project and run it.

It will display as like below:

Output:

This is example of ItSolutionStuff.com
https://itsolutionstuff.com/
example@gmail.com

I hope it can help you...