ItSolutionStuff.com

Hey Guys,

Today, I would like to show you angular 15 global variable for all components. I’m going to show you about global variable in angular 15. if you want to see an example of dynamic global variable in angular 15 then you are in the right place. I explained simply step by step angular 15 access global variable. you will do the following things for angular global constants.

We always need to declare a global variable file for our angular 15 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...