48

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.

2 Answers 2

140

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

Sign up to request clarification or add additional context in comments.

11 Comments

Working with angular 6 too
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?
How to pass any parameter in the same method of external file?
Works for Angular 8. Only change is, instead of .angular-cli.json its just angular.json
Working perfectly with Angular 10 and 11 too.
|
16

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);
}

11 Comments

didn't work for me. I had to pass one parameter. This didn't show any error but that function isn't alerted
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
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
instead of "var", you should write "function" keyword.
How to call function having parameters from .js file in .ts file?@ShashikantDevani
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.