by Sai gowtham

How to declare a Global variable in Angular

In this tutorial, we are going to learn about how to declare and use a global variable in the angular with the help of an example.

Global variables help us to access the particular data throughout our app components.

Declaring a global variable

  1. Create a new file called global-variable.ts in your app folder.
  2. Now, add the following variables to it.
global-variables.ts
export const author:string = "Gowtham";

export const title:string = "My first project";

In the above code, we have declared two variables which are author and title.

Accessing the global variable

To access the global variable, we need to import the global-variables.ts file inside our angular app components like this.

app.component.ts
import { Component } from '@angular/core';
import {author, title} from './global-variables';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = author;  projectTitle = title;}

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course