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...
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
We are Recommending you
- Angular 17 Multiple Image Upload with Preview Example
- Angular Material 17 Datepicker Example Tutorial
- How to use Moment JS in Angular 17?
- Angular 17 File Upload Tutorial Example
- Angular 17 Image Upload with Preview Example
- How to Install Material Theme in Angular 17?
- Angular 17 Reactive Forms with Validation Example
- How to Add Bootstrap 5 in Angular 17 Application?
- Angular 17 Generate New Component using Command Example
- Angular 17 Create New Project using Command Example
- How to Upgrade from Angular 16 to Angular 17?