How to Define Global Variables in Angular 17?

Hello,

In this guide, I'll explain how to use a global variable in Angular 17 across all components. We'll go through the basics of what a global variable is in Angular 17 and demonstrate how to implement a dynamic global variable. I'll break down the steps for accessing a global variable in Angular 17 in a straightforward manner. Take a look at the example below, showcasing Angular global constants.

For our Angular 17 application, it's essential to have a global variable file. This file allows us to define global variables such as the site title and API URL. These variables become easily accessible throughout the entire application.

In this instance, we'll create a GlobalConstants file to house our global variables. I've included two variables in this file: appURL and appTitle. I'll demonstrate how to access the values of these variables in my AppComponent file, and you can apply the same approach to access them in any component you need.

Step for Angular 17 Define Global Variables

• Step 1: Create Angular 17 Project
• Step 2: Create GlobalConstants File
• Step 3: Use Global Constants in ts File
• Step 4: Update HTML File
• Run Angular App

Let's follow following steps:

Step 1: Create Angular 17 Project

To begin, create a new Angular app for this demonstration. If you've already created one, there's no need to initiate a new Angular 17 app.

ng new my-new-app

Step 2: Create GlobalConstants File

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";
    
}

Step 3: Use Global Constants in ts File

Here, simply update your "app.component.ts" with following code:

src/app/app.component.ts

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

Step 4: Update HTML File

Here, simply update your "app.component.html" with following code:

src/app/app.component.html

<div class="container">
    
  <h1>How to Define Global Variable in Angular 17? - ItSolutionStuff.com</h1>
      
  <p><strong>App Title: </strong>{{ title }}</p>
  <p><strong>App URL: </strong>{{ url }}</p>
  <p><strong>App Email: </strong>{{ email }}</p>
    
</div>

Run Angular App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:

ng serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:4200

Output:

Now you can see layout as like bellow screen shot:

I hope it can help you...

I hope it can help you...