Adding JavaScript File to Angular 4 Component

Question

Let's just say I make a custom JavaScript file ie 'custom.js'

How would I implement this into a Component?

If I add 'custom.js' to index.html, that's fine but is there any way I can add it specifically to the component?

animation, ect. For example, moving around a navigation bar, ect — Eddie Taliaferro II
– Eddie Taliaferro II, Commented Dec 1, 2017 at 19:00
Can't you just import from inside your component definition? Although, I guess that would require it to be a module. Is it possible to change your custom.js into a module? — mhodges
– mhodges, Commented Dec 1, 2017 at 19:08
Can you show how your .js looks like and where you have kept it in your project? — Manzer A
– Manzer A, Commented Dec 1, 2017 at 19:44

solanki... · Accepted Answer · 2018-02-20 06:54:23Z

6

Step: 1=> Create and write your js code say "synapse.js" in /app folder. The function or constant which you to use in a component should be exported using export keyword. for ex:

synapse.js

export function synapseThrow() {
  return 'hello'
}

export const MY_VAR = 'world!';

Step: 2=> in angular-cli.json, add the below part in apps object.

"scripts": ["app/synapse.js"]

Step: 3=> in tsconfig.json, add the below property in compilerOptions.

"allowJs": true

Step: 4=> in any component say in "app.component.ts" import the "synapse.js" file using import keyword.

app.component.ts

// other imports

import { MY_VAR, synapseThrow } from './synapse';

// other app code here

ngOnInit(){
  const returned = MY_VAR;
  const returnFunc = synapseThrow();
}

answered Feb 20, 2018 at 6:54

solanki...

5,1182 gold badges29 silver badges29 bronze badges

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

Comments

IZI · Accepted Answer · 2019-01-13 13:44:30Z

1

Try this way:

Put js file in path: assets/js/custom.js
Code your component

ts file

export class MyComponent implements AfterViewChecked {
  constructor(private elementRef: ElementRef) {

  }
  ngAfterViewChecked() {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "../assets/js/custom.js";
    this.elementRef.nativeElement.appendChild(s);
  }
}

answered Jan 13, 2019 at 13:44

IZI

911 silver badge3 bronze badges

Comments

Joaquin Diaz · Accepted Answer · 2017-12-01 19:21:41Z

0

Try declaring a variable that you have inside of your custom.js file

declare var aFunction: any;

import '../../../js/custom.js';

export class ExampleComponent{

    variable: any;

    constructor() { }

    ngOnInit() { 
       new aFunction(this.variable);  //aFunction() is inside custom.js
    }
}

answered Dec 1, 2017 at 19:21

Joaquin Diaz

1761 gold badge5 silver badges17 bronze badges

Collectives™ on Stack Overflow

Adding JavaScript File to Angular 4 Component

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related