Angular: Declare Global Variable With Example

In this tutorial, we will learn how to declare a global variable in Angular with examples step by step. Global variables are helpful to pass the data throughout our app components. Let’s just explore the Angular global variable.

01 When We Need To Declare Global Variable

Most of the applications required to access the same data without repetition like App URL, App Title, App Logo URL, Global Colors, App Name, App Email, etc.

So we can’t call all these data in each component, this is the bad practice of programming. Instead, we can create a global component and by using it we can easily access all these data across the application.

Example:

In this example, we will create a GlobalComponenet file and we will define all the global variables into it.

Then we will access all the declared global variables into any other components. Let’s see how to do it.

02 Declaring Global Variable In Angular

1. At the very first, create a new file with a name global-component.ts in your app directory or you can create in any folder you want inside the app directory.
2. Then add your global variables into it like below:

src/app/global-component.ts

export class GlobalComponent {

    public static appUrl: string = "https://www.example.com/";
    public static appName: string = "Example Site";
    public static appLogo: string = "assets/images/logo.png";
    public static appEmail: string = "johndoe@example.com";

}

03 Accessing Global Variable

After declaring the global variables, it’s time to access the global variable. For that, we need to import the global-componenet.ts file inside our angular app components just like this:

src/app/app.component.ts

import { Component, OnInit  } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import{ GlobalComponent } from './global-component';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{

  title = GlobalComponent.appName;
  url = GlobalComponent.appUrl;
  logo = GlobalComponent.appLogo;
  
}

That’s it for now. We hope this article helped you to how to declare global variable in Angular.

Additionally, read our guide:

1. Angular DataTable Tutorial With Example
2. How To Reinstall Angular CLI Step By Step
3. How To Use The Laravel Soft Delete
4. How To Add Laravel Next Prev Pagination
5. Laravel Send Mail From Localhost
6. How To Convert Word To PDF In Laravel
7. How To Calculate Age From Birthdate
8. How to Convert Base64 to Image in PHP
9. Check If A String Contains A Specific Word In PHP
10. Dynamically Populate A Select Field’s Choices In ACF
11. How To Find Duplicate Records in Database
12. Difference between del, remove and pop on lists
13. How To Solve NPM Start Script Missing Error
14. How To Declare A Global Variable in Vue
15. Best Way to Resize Google reCAPTCHA

Please let us know in the comments if everything worked as expected, your issues, or any questions. If you think this article saved your time & money, please do comment, share, like & subscribe. Thank you in advance. 🙂 Keep Smiling! Happy Coding!