0

I have an angular app where in my index.html i have a variable inside a tag, like this:

<script type="text/javascript">
let global = 5;
</script>

I need to read and edit the value of this variable, inside an angular component, but I do not know how to do it.

I saw that it is possible to read the value if you create the variable inside the "window" object of javascript (window.global = 5) and then use it in angular component, but i think it would not work for me because i need that variable to be outside, as specified above.

Is it possible? Any ideas?

Alberto Camino
  • 329
  • 2
  • 11
  • 1
    if you change the `let` to `var` then you can indeed reference it from anywhere - including Angular components - as `window.global`. But really, think of any alternative to using global variables. – Robin Zigmond Apr 20 '22 at 11:58
  • @RobinZigmond Finally I used your idea and it worked. I know it is not the best idea to use global variables but in this case I have no choice :/ – Alberto Camino Apr 20 '22 at 15:49

3 Answers3

3

The keyword declare to the rescue: first, declare your global with var (let doesn't work)

<script type="text/javascript">
  var someVar = 5;
</script>

and access it in, say, Angular component:

declare var someVar;
// ...
    this.foo = someVar;

https://stackblitz.com/edit/angular-ivy-zjpnzq?file=src%2Fapp%2Fhello.component.ts

mbojko
  • 13,503
  • 1
  • 16
  • 26
0

Finally I used an aproximation of @robin-zigmond answer. I changed let to var in the script tag and in my angular component I access the variable using:

window["global"]

I can edit the value inside a component using, for example:

window["global"] = 6

enter image description here

Moreover, I tried @mbojko answer and it worked too.

Alberto Camino
  • 329
  • 2
  • 11
-1

You can pass the window varaible to the scope in your controller.

<!DOCTYPE html>
<html>
<script>window.HELLO_MSG = 'Hello,';</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ wlcmMsg + " " + firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.wlcmMsg = window.HELLO_MSG;
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

</body>
</html>

Or you can inject the whole window object like here: How to inject window into a service?

luko
  • 69
  • 4