ItSolutionStuff.com

How to Define Global Variables in Angular 17?

By Hardik Savani • May 2, 2024
Angular

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...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Angular 17 Multiple Image Upload with Preview Example

Read Now →

Angular Material 17 Datepicker Example Tutorial

Read Now →

How to use Moment JS in Angular 17?

Read Now →

Angular 17 File Upload Tutorial Example

Read Now →

Angular 17 Image Upload with Preview Example

Read Now →

How to Install Material Theme in Angular 17?

Read Now →

Angular 17 Reactive Forms with Validation Example

Read Now →

How to Add Bootstrap 5 in Angular 17 Application?

Read Now →

Angular 17 Generate New Component using Command Example

Read Now →

Angular 17 Create New Project using Command Example

Read Now →

How to Upgrade from Angular 16 to Angular 17?

Read Now →