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 eleme

Answer 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.

Please see the GitHub repo (Angular8)

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