How to Load External JS Scripts Dynamically in AngularJS ?

The task is to load a JS code either from a CDN or JS file stored in the system dynamically at runtime in AngularJS i.e. JavaScript code should be loaded dynamically. For example, on a button press or on some event.

Whenever we want to load the script file we would have to create an element of type “script” using document.createElement. We would then specify its src attribute to be the location of the script either CDN or a local js file. Once that’s done, we will have to append the tag to an HTML element that’s already existing in the DOM. For example, the head element.

Syntax:

const node = document.createElement('script');
node.src = 'SCRIPT_FILE_OR_URL_HERE'
node.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(node);

Example 1: In this example, we are loading a load.js file from file system dynamically on component load.

app.component.html



filter_none

edit
close

play_arrow

link
brightness_4
code

<div style="text-align:center;">
    <h1 style="color: green;">
        GeeksForGeeks
    </h1>
</div>

chevron_right


app.component.ts

filter_none

edit
close

play_arrow

link
brightness_4
code

import { Component } from '@angular/core';
  
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Load script GFG';
   constructor() {
     this.loadScripts();
   }
  
   // Method to dynamically load JavaScript
   loadScripts() {
  
     // This array contains all the files/CDNs
     const dynamicScripts = [
        'assets/load.js'
     ];
     for (let i = 0; i < dynamicScripts.length; i++) {
       const node = document.createElement('script');
       node.src = dynamicScripts[i];
       node.type = 'text/javascript';
       node.async = false;
       document.getElementsByTagName('head')[0].appendChild(node);
     }
  }
}

chevron_right


load.js

filter_none

edit
close

play_arrow

link
brightness_4
code

alert('load js has been loaded'); 

chevron_right


Output: As soon as the app.component loads, the script loads as well and displays the alert window.
loaded loads file

Example 2: In this example, we will load the load.js script on button click.

app.component.html

filter_none

edit
close

play_arrow

link
brightness_4
code

<div style="text-align:center;">
    <h1 style="color: green;">
        GeeksForGeeks
    </h1>
    <button (click)="loadScripts($event)">
        Click me to load JS
    </button>
</div>

chevron_right


app.component.ts

filter_none

edit
close

play_arrow

link
brightness_4
code

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Load script GFG';
  constructor() {
  }
  loadScripts($event) {
    const dynamicScripts = [
      'assets/load.js'
    ];
    for (let i = 0; i < dynamicScripts.length; i++) {
      const node = document.createElement('script');
      node.src = dynamicScripts[i];
      node.type = 'text/javascript';
      node.async = false;
      document.getElementsByTagName('head')[0].appendChild(node);
    }
  }
}

chevron_right


load.js

filter_none

edit
close

play_arrow

link
brightness_4
code

alert('load js has been loaded'); 

chevron_right


Output: As the button is pressed, the JS file loads.
loading js on button click output

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.