How to call JavaScript functions from Typescript in Angular 5?

Question

I'm working on PDF Viewer development in Angular 5. I'm done with writing HTML code for the UI part. Now I've JavaScript files that provide functionality for the UI elements. As Angular 5 supports typescript for implementing functionality for UI components, I want to include JavaScript files in Angular Project and call them from my Typescript code.

Questions:

1. How and where to include JavaScript Files in Angular Project?
2. How to call the JavaScript Functions from Typescript class?

It would be great if anyone provides me an example !!

Thanks in Advance!!

Solution 1

1. How and where to include JavaScript Files in Angular Project?

You need to include your JS file in the asset folder and refer this JS file in .angular-cli.json file.

Refer the snapshot's,

Folder structure should be like this.

.angular-cli.json

2. How to call the JavaScript Functions from Typescript class?

your TS should be like this.

myJsFile.js file content.

This sample logic mentioned above will work, I have tried and tested using version 4, So I am expecting it to work with version 5 also.

Updating the answer for the new Angular version release. Working perfectly till version 11.2.6.

Find the code (function with parameter) here for Angular11

Solution 2

The given answer by Arun Raj R is perfect.

But for the angular 6+ project you need to take angular.json instead of angular-cli.json.

also if you want to pass parameter inside external function that come from js file than use just function name.

For Ex :

app.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
declare function myfunction: any; // just change here from arun answer.

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
    constructor() { }

    ngOnInit() { 
        myfunction('test1', 'test2');
    }
};

yourJs file :

function myfunction(params1, params2) {
    console.log('param1', params1);
    console.log('param2', params2);
}

Comments

[Billy Koswara]

Working with angular 6 too

[Billy Koswara]

I wonder about the performance. Does include Js file in angular.json the best way. does it loaded and ready for all component to call. in fact you use declare function:any is kind of weird, it means i can call the function like that in other component too right? won't it affect the performance?

[arunraj6]

If you really worried about the perfomance & declaration syntax in the component(one/multiple). You can go for TypesScript declaration files. Conside this sample example: bennadel.com/blog/…

[Pardeep Jain]

How to pass any parameter in the same method of external file?

[so-random-dude]

Works for Angular 8. Only change is, instead of .angular-cli.json its just angular.json

[arunraj6]

Please check the latest update in my answer with an example of Angulr8.

[Akhil]

didn't work for me. I had to pass one parameter. This didn't show any error but that function isn't alerted

[Shashikant Devani]

Hope, you added that javascript file inside the angular.json. also stop running the ng serve and again start it. So angular cli fetch updated angular.json

[Akhil]

Yes sorry not to update my comment. I had to add the myscript.js file location in <script> tag of my index.html. That way it worked. Thanks @Shashikanth

[Dila Gurung]

instead of "var", you should write "function" keyword.

[Yesha Shah]

How to call function having parameters from .js file in .ts file? @ArunRajR

[Yesha Shah]

How to call function having parameters from .js file in .ts file?@ShashikantDevani

[Juliyanage Silva]

@YeshaShah yeah I need the same and seems it is not working

[Shashikant Devani]

@YeshaShah, Use var instead of function. Like this declare var myfunction: any;

[Shashikant Devani]

@YeshaShah, Hope you had added your custom created js file in scripts in angular.json. Like this src/assets/js/custom.js. If you added custom.js path in running project than restart project (ng serve or npm start) after adding anything in angular.json.

[N4ppeL]

typescript complains about that. Using declare function myfunction(param1: string, param2: string): any; worked..

[user2746732]

declare function myfunction: any; doesn't work in type script neither declare function myfunction(param1: string, param2: string): any;

[jkr]

declare function myfunction(parameter1: any): any; works

[Sarath Mohandas]

Working perfectly with Angular 10 and 11 too.

[arunraj6]

@YeshaShah passing the parameters is explained in Shashikant Devani answer.

[Venugopal M]

Works great with Ang8. No tweaks required except for the json file name

[FiringBlanks]

I was getting an error saying the JS function is not defined, but it's working now after restarting my localhost server.