How to Use External JavaScript with Angular project?

Angular has changed the way we used to deal with JavaScript code using Typescript. The Typescript code later trans-pile into JavaScript which our browser understand to give the resulting output.

In Angular applications, though we deal with Typescript code most of the time, sometime its necessary to use the external JavaScript files (e.g third party libraries) to perform the certain functionalities.

In this post, I will explain the multiple ways to use the external JavaScript code with Angular Project. Let’s say I have an external JavaScript file as shown below with very simple function that alert with message on execution.

Now, I am going to execute the function DisplayMessage() from the CustomScript.js file from the Typescript file on Angular project.

For this first I have to load this CustomScript.js file from Angular project before I fire the click event. Here are two options to use external JavaScript with Angular project.

Option 1: Load External JavaScript with Angular Using angular.json

I have placed the CustomScript.js file on folder path “src/assets/CustomScript.js“. You can add this path to the scripts:[] array of angular.json file as shown below.

This will load this custom script file on application load and will be available to use whenever required within the angular project.

How to call JavaScript Function from Typescript code

Now, I will call DisplayMessage() from CustomScript.js from app.component.ts as shown below.

Here, declare the constant variable ‘DisplayMessage’ of type any and call that as function on click event from angular template. One thing to keep in mind is that, the variable name ‘DisplayMessage‘ is same as the function in custom script file.

Here is the code from app.component.html that represent the button click event.

Option 2: Load External JavaScript file On Component Level

If your requirement is to use the functionality of external script file only when the specific component loads then, this will be the better option for you.

Create a Typescript function on component level that helps to load the script dynamically.

The externalScriptArray array can take multiple scripts as well. Now call this function inside the constructor as shown below.

All code from app.component.ts looks like this.

The onClick() event call is pretty much the same from previous option which will execute the DisplayMessage() method from CustomScript.js.

This is it. Please let me know on comment section below, if you have other better ways to load external JavaScript code on Angular Project.

About dipneupane

Dip is a passionate Software Developer based in Kathmandu, Nepal. He chew code and smash keyboard for living. Apart from that, he writes about almost everything on buzzedcode.com.

View all posts by dipneupane →

2 Comments on “How to Use External JavaScript with Angular project?”

Leave a Reply

Your email address will not be published. Required fields are marked *