How to access global js variable in angular2 component

Question

I have a global js variable defined below (@Url is an ASP.Net MVC html helper it will get converted to a string value):

<script>
  var rootVar = '@Url.Action("Index","Home",new { Area = ""}, null)';
  System.import('app').catch(function(err){ console.error(err); });
</script>

How do I access rootVar in an angular2 component? I used to use the window service in angular 1.5, is there an analogous way of doing that in angular2?

Specifically, I want to use that rootVar variable to help generate the templateUrl in this component:

import { Component, Inject} from '@angular/core';

@Component({
    selector: 'home-comp',
    templateUrl: '../Home/Root'
})

export class HomeComponent {   
    constructor( ) {  }
}

If it's global, it's global. That means that any piece of JS code can access the variable. — JB Nizet
– JB Nizet, Commented Jun 6, 2016 at 16:50
You can look at this Thierry`s answer stackoverflow.com/questions/37337185/… — yurzui
– yurzui, Commented Jun 6, 2016 at 16:50

Riyaz Sayyad · Accepted Answer · 2017-03-08 21:23:55Z

38

Within your component you could reference window to access the global variables like so:

rootVar = window["rootVar"];

or

let rootVar = window["rootVar"];

answered Mar 8, 2017 at 21:23

Riyaz Sayyad

5411 gold badge5 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GillesC · Accepted Answer · 2017-12-14 18:22:26Z

13

You need to update the file that bootstraps your application to export a function:

import {bootstrap} from '...';
import {provide} from '...';
import {AppComponent} from '...';

export function main(rootVar) {
  bootstrap(AppComponent, [
    provide('rootVar', { useValue: rootVar })
  ]);
}

Now you can provide the variable from the index.html file this way:

<script>
  var rootVar = '@Url.Action("Index","Home",new { Area = ""}, null)';
  System.import('app/main').then((module) => {
    module.main(rootVar);
  });
</script>

Then you can inject the rootVar into components and services this way:

import { Component, Inject} from '@angular/core';

@Component({
  selector: 'home-comp',
  templateUrl: '../Home/Root'
})
export class HomeComponent {   
  constructor(@Inject('rootVar') rootVar:string ) {  }
}

edited Dec 14, 2017 at 18:22

GillesC

10.9k3 gold badges42 silver badges55 bronze badges

answered Jun 6, 2016 at 16:51

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

2 Comments

cobolstinks Over a year ago

Thanks, I was able to access the variable in my component following your example, but I'm running into a new problem. Now that i have the rootVar being injected into the constructor I can't seem to use it to modify the component templateUrl. @Component({ selector: 'home-comp', templateUrl: '..{{baseUrl}}Home/Root' }) export class HomeComponent { baseUrl: string; constructor( @Inject('rootVar') rootVar: string) { this.baseUrl = rootVar; } }

Thierry Templier Over a year ago

You're welcome! In fact, you can't use the variable this way to build the tempalteUrl path. One is at the level of the class and other of the instance... In your case, I would try to extend the UrlResolver class and inject your variable in it. See this link: angular.io/docs/ts/latest/api/compiler/UrlResolver-class.html.

Dmitriy · Accepted Answer · 2017-05-09 02:04:47Z

11

In the component file, outside component class definition, declare rootVar, and it will become available in the component constructor:

declare var rootVar: any;

then

@Component(...)
export class MyComponent {
  private a: any;

  constructor() {
    this.a = rootVar;
  }
}

edited May 9, 2017 at 2:04

answered Mar 22, 2017 at 1:55

Dmitriy

5515 silver badges11 bronze badges

1 Comment

hewstone Over a year ago

Important to note. I could not get the declare outside of the component class to be visible to any methods in the component class. You need to set an instance variable in constructor to reference the global variable and then reference that variable in your methods

konzo · Accepted Answer · 2019-06-26 21:01:32Z

7

Here don't forget to wash your hands... Angular is just javascript

//Get something from global
let someStuffFromWindow= (<any>window).somethingOnWindow;

//Set something
(<any>window).somethingOnWindow="Stuff From Angular";

This is bad for some reason.. you should feel bad!

Go ahead and use that find and replace fuction for window. with (<any>window).

edited Jun 26, 2019 at 21:01

answered Sep 3, 2017 at 16:07

konzo

2,12325 silver badges36 bronze badges

6 Comments

redent84 Over a year ago

window['somethingOnWindow'] looks cleaner. Don't ask me why

konzo Over a year ago

why? @redent84 (sorry couldn't help it)

Aaron Rabinowitz Over a year ago

I think in general [] is used for dynamic fields. Using property.value is used for none dynamic fields (see airbnb styleguide).

Jonathan Muller Over a year ago

Thanks. Had to search for a long time to find a solution without 5 files and 40 lines of code.

Jonathan Muller Over a year ago

I prefer with the type casting, so it looks a bit complicated to fit with the rest of the code, and I can pretend I do smart Typescript

|

null canvas · Accepted Answer · 2016-06-06 17:05:28Z

3

A different approach would be to export your var, for ex:

  export var API_ENDPOINT = '@Url.Action("Index","Home",new { Area = ""}, null)';

and then import that in your component

import {API_ENDPOINT }

answered Jun 6, 2016 at 17:05

null canvas

10.7k2 gold badges17 silver badges18 bronze badges

Comments

Андрей Мельник · Accepted Answer · 2020-10-12 09:00:53Z

0

In HTML template you can use method get

<span>{{getGlobalData('rootVar')}}</span>

And create method in component like:

get getGlobalData() {
    // Closure workaround
    return function(rootVarName) {
        return window[rootVarName];
    }
}

answered Oct 12, 2020 at 9:00

Андрей Мельник

113 bronze badges

Collectives™ on Stack Overflow

How to access global js variable in angular2 component

6 Answers 6

Comments

2 Comments

1 Comment

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

1 Comment

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related