How to add custom js file to angular component like css file

Question

I am new to angular. Can anyone say how can I add custom js file in angular template.

@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] })

UPDATED

i want to add the below code

$("#single-slider").owlCarousel({
      navigation: true,
      slideSpeed: 600,
      autoPlay: 6000,
      singleItem: true,
      pagination: false,
      navigationText: [
          "<i class='fa fa-angle-left'></i>",
          "<i class='fa fa-angle-right'></i>"
      ],
  });

Thanks for the quick response. But it is not working in that way. Can you show me with example. — Lucifer
– Lucifer, Commented Dec 15, 2017 at 9:15
<script src="yoururl"> and declare your varibale what you use. — Rach Chen
– Rach Chen, Commented Dec 15, 2017 at 9:18
@RachChen, script tags are automatically removed by Angular DOM Sanitizer. You'll either have to disable the DOM sanitizer to make your solution work or if you are not ready to do that, please check my answer below. — Akash Agrawal
– Akash Agrawal, Commented Dec 15, 2017 at 9:30

Akash Agrawal · Accepted Answer · 2017-12-15 09:38:51Z

2

You can add a <script> in your HTML but IT WON'T WORK because while building the app the Angular DOMSantizer removes all the <script>.

So you have to load the custom js the way @trichetriche showed. But, if the js is required only for one component then there's a workaround which is kind of hacky.

You can load the js just after the DOM has been loaded/initialized in the ngAfterViewInit(). This way Angular DOMSantizer doesn't know about the <script>.

Here you go:

constructor(private elementRef:ElementRef) {};

ngAfterViewInit() {
  var s = document.createElement("script");
  s.type = "text/javascript";
  s.src = "../path-to-your-js-or-external-URL";
  this.elementRef.nativeElement.appendChild(s);
}

For more info, refer this: https://github.com/angular/angular/issues/4903

edited Dec 15, 2017 at 9:38

answered Dec 15, 2017 at 9:27

Akash Agrawal

2,2991 gold badge21 silver badges41 bronze badges

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

2 Comments

Akash Agrawal Over a year ago

I'm glad it helped. Happy coding :)

Geo Mukkath Over a year ago

Thanks a lot, this works. The problem is that many blogs, articles and tutorials are in plain JS but the industry uses TS because of the frameworks. This solved the problem.

user4676340 · Accepted Answer · 2017-12-15 09:12:01Z

0

You can't.

But, you can add it in your application as a global script by addiing it in angular-cli.jsonfile :

"scripts": [
  "assets/xxx.js", // path to assets file
  "../node_modules/moment/moment.js" // Path to node modules dependency
],

answered Dec 15, 2017 at 9:12

user4676340

2 Comments

Lucifer Over a year ago

Hey thanks. i already tried that one. But it is not triggering. Just updated my question please check.

user4676340 Over a year ago

What do you mean it's not triggering ? The code has errors, it does nothing, ... ?

andrea06590 · Accepted Answer · 2017-12-15 09:34:22Z

0

3 main steps to include js in angular

Add your script.js in assets/scripts and angular-cli package
In your js file in assets/scripts you must have window.initMethod = function() { ... your code ... }
In your component.ts declare let initMethod: any;

answered Dec 15, 2017 at 9:34

andrea06590

1,3093 gold badges11 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to add custom js file to angular component like css file

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related