Access javascript variable in component in Angular 5

Question

I have a js file in my Angular application, data.js . This js file has some variables declared in it, something like below.

 var data = 'test'

Now I have to access these variables and their values in my component (app.component.ts).

I read some where that declaring them as exports make them into modules and those can be accessed anywhere, But I'm not sure how this can be done.

This is the structure of my application. I have data.js in assets->js folder.I need to modify the variable value in app.component.ts.

I'm very new to Angular. Is this even possible?

Please do not vote down the question, as I'm very new to angular. — CrazyCoder, Mar 04 '18 at 05:13

William Fleming · Accepted Answer · 2018-03-04T06:38:35.917

With the file in your assets, I am guessing you are declaring it on the window. You will need the include the script in your index.html, and then access it on the window within your component via window.data. This is not really the recommended way of doing this unless your use case dictates it. The module approach you mentioned is preferred.

Next to your app.component.ts, create a file called data.ts, with:

export let data: string = 'data';

In your app.component.ts, import it using:

import { data } from './data.ts';

If you plan to not mutate that data, consider using the const keyword instead (in data.ts).

Directory structure

/app.component.ts
/data.ts
/...

Edit: Show Global Approach

You will need to include your script outside of the context of the Angular application. If you bootstrapped your application using the Angular CLI, you can add a reference to it in the cli configuration file. See this documentation on the topic.

That file will be included and will be available for access within your component on the window. The tricky part comes with typing and the Window. And example may look like this.

class AppComponent extends Component {

     private data: string;
     constructor() {
       // Explicitly cast window as an any type.  Would be better to type this, but this should work for you.
       this.data = (<any>window).data;
     }       

}

Thanks for the reply. I understand that global variables are not to be used, but i need to use it for my case. Can you show me an example of how to use the window.data in app.component.ts — CrazyCoder, Mar 04 '18 at 05:50
What if i want to use variable declared or used by 3rd party javascript library? Let say google Ads, To refresh or load ad we have to use googletag variable how to access that variable in angular component? — Rafique Mohammed, Jul 11 '18 at 10:38

score 2 · Answer 2 · edited Feb 25 '20 at 07:28

(referrring to https://stackoverflow.com/a/42682160)

first you have to include the script into your src/index.html like

< script src="/assets/js/data.js">< /script>

important is that the above statement is placed before your angular root component tags (< root-component>< /root-component> or < ion-app>< /ion-app> or something like that)

then you can simply write (for example inside app.component.ts ngOnInit function)

let varFromJsFile = window["data"] // varFromJsFile = 'test'

score 0 · Answer 3 · answered Mar 04 '18 at 05:16

You want the variable to be a member of a Component class, not just a variable declared anywhere within a module.

If this doesn't make sense right away, you need to look more carefully at some basic Angular code samples.

Also, as long as you're using Angular and therefore TypeScript, it's better the declare variables using let or const.

Access javascript variable in component in Angular 5

3 Answers3