What is the process of invoking an external JavaScript function in Angular 5?

Question

What is the process of invoking an external JavaScript function in Angular 5?

I recently downloaded a theme from this source. I need to specify script and CSS in the index.html file.

The body section of index.html looks like this:

<body>
  <app-root></app-root>
  <script type="text/javascript" src="./assets/js/main.85741bff.js"></script>
  <script type="text/javascript" src="./assets/js/common.js"></script>
</body>

In common.js, I have defined my function and called it from main.85741bff.js file.

This is the function in common.js:

document.addEventListener("DOMContentLoaded", function (event) {
     masonryBuild();
     navbarToggleSidebar();
     navActivePage();
});

However, I am facing an issue where I can call the function when the page reloads but not when the content loads dynamically.

If anyone has any suggestions on how to resolve this problem, your help would be greatly appreciated.

javascript angular typescript angular5

Answer 1

Answer №1

You have the ability to incorporate javascript within your Angular application.

Begin by following these steps:

Step 1. Create a demo.js file in the assets/javascript directory.

export function test1(){
    console.log('Executing test 1 function');
}

Step 2. Create a demo.d.ts file in the assets/javascript folder.

export declare function test1();

Step 3. Implement it within your component

import { test1 } from '../assets/javascript/demo'; 
 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    console.log(test1());
  }
}

Please ensure that both the .js and .d.ts files have the same name.

Answer 2

You have the ability to incorporate javascript within your Angular application.

Begin by following these steps:

Step 1. Create a demo.js file in the assets/javascript directory.

export function test1(){
    console.log('Executing test 1 function');
}

Step 2. Create a demo.d.ts file in the assets/javascript folder.

export declare function test1();

Step 3. Implement it within your component

import { test1 } from '../assets/javascript/demo'; 
 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    console.log(test1());
  }
}

Please ensure that both the .js and .d.ts files have the same name.

Answer 3

Answer №2

To resolve the issue, make sure to adjust the sequence in which your JavaScript files are loaded. It is advisable to load common.js before main......js. This way, your script will be able to access functions from files that have already been loaded. Simply swap the order of these two lines of code:

<body>
  <app-root></app-root>
  <script type="text/javascript" src="./assets/js/common.js"></script>
  <script type="text/javascript" src="./assets/js/main.85741bff.js">/script>
</body>

Answer 4

To resolve the issue, make sure to adjust the sequence in which your JavaScript files are loaded. It is advisable to load common.js before main......js. This way, your script will be able to access functions from files that have already been loaded. Simply swap the order of these two lines of code:

<body>
  <app-root></app-root>
  <script type="text/javascript" src="./assets/js/common.js"></script>
  <script type="text/javascript" src="./assets/js/main.85741bff.js">/script>
</body>

Answer 5

Answer №3

When working on an Angular 4 or 5 project, you'll come across the .angular-cli.json file in the project folder.

Within this file, there is a section that looks like this:

"apps": [
  {
    "scripts": []
  }
]

To include external JavaScript files in your project, simply add the path to your script within the "scripts" array.

Answer 6

When working on an Angular 4 or 5 project, you'll come across the .angular-cli.json file in the project folder.

Within this file, there is a section that looks like this:

"apps": [
  {
    "scripts": []
  }
]

To include external JavaScript files in your project, simply add the path to your script within the "scripts" array.

Answer 7

Answer №4

To access these functions, you can utilize the window object:

document.addEventListener("DOMContentLoaded", function (event) {
      window['toggleSidebar']();
      window['activatePage']();
 });

Answer 8

To access these functions, you can utilize the window object:

document.addEventListener("DOMContentLoaded", function (event) {
      window['toggleSidebar']();
      window['activatePage']();
 });

What is the process of invoking an external JavaScript function in Angular 5?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

acquire information from a variable using angularjs

Error in Layout of Navigation Panel and Tabbed Pages

Displaying the countdown of days and hours until a specific date is just a matter of using

Issue with Bootstrap side navbar not collapsing when clicked on a link

You cannot assign an optional parameter in Express after it has already been declared

Tips for choosing a subset of objects within a larger array of objects and generating a new array from them?

The combination of select2 and jsonform is not functioning properly

Merge generic nested objects A and B deeply, ensuring that in case of duplicate properties, A's will take precedence over B's

Thumbnail Option in the WordPress Media Uploader

What is the process for implementing pagination in vue-tables-2 with a Laravel REST API?

What sets apart gzip from x-gzip content? And how can I decompress x-gzip specifically? zlib appears to be struggling

Unable to generate StumbleUpon traffic for a URL through AJAX due to the API returning text/plain

What is the method to provide function parameters without executing the function?

The Angular framework always initializes the list items in CDK drop List starting from the initial index

Unable to locate a suitable version for internal-slot@^1.0.3 at this time

Retrieving an Instance of Google Maps Object with the Help of JQuery

fetching data with Contentful and GatsbyJS

Is there a way to trigger the activation of the datepicker during the `onLoad` event?

Display/Conceal WP Submenu

Creating a consolidated HTML table by extracting and comparing data from various JSON files