Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to call JavaScript functions from Typescript in Angular 5?

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!!

like image 867
Ravi Kumar B Avatar asked Mar 28 '18 05:03

Ravi Kumar B


People also ask

Can we call JavaScript function from TypeScript?

Until then, you will need some interoperability between JavaScript and TypeScript. Being in a JS file and calling a function defined in a . ts is trivial - it just works™.

What converts TypeScript to JavaScript in angular?

TypeScript is a primary language for Angular application development. It is a superset of JavaScript with design-time support for type safety and tooling. Browsers can't execute TypeScript directly. Typescript must be "transpiled" into JavaScript using the tsc compiler, which requires some configuration.


1 Answers

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.

enter image description here

.angular-cli.json

enter image description here

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

your TS should be like this.

myJsFile.js file content.

enter image description here

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

like image 172
arunraj6 Avatar answered Sep 25 '22 00:09

arunraj6