How to use javascript functions in an Angular 2 component from a different file

Question

I have a javascript file that contains some data manipulation functions (No DOM manipulation at all) such as float rounding, mathematical operations, ...etc

my js file called myexample.js looks like that

function example(input) {
  return input * 2
}
module.exports = { example: example }

and then I have my angular component example.component.ts

for example:

import { Component, EventEmitter} from '@angular/core';
@Component({
  selector: 'input-number',
  template: `<input 
              type='text' 
              [(value)]='value' 
              (blur)='runExample()' 
             />`,
  inputs: ['value'],
  outputs: ['valueChange']
})
export class Example {
  value: string;
  valueChange = new EventEmitter;

  runExample() {
    let val = parseFloat(this.value);
    // here i need to call example(input) from myexample.js
    // and assign the return to val
    this.valueChange.emit(val);
  }

I have been searching for quite a while now and tried multiple things but unfortunately with no luck at all.

I would be really grateful if someone can help.

Answer 1

You can export functions in TypeScript:

export function example(input) {
  return input * 2;
}

and use it this way (assuming your file name is lib.ts):

import {example} from './lib';

example();

If you want to use a CommonJS file, you need to configure SystemJS in the map attribute:

System.config({
  (...)
  map: {
    lib: 'path/to/lib/js'
  }
});

You can import your module the same way then:

import {example} from './lib';

Answer 2

this is what it worked for me I was trying to use html2pdf from an Angular2 app, so I had to make a reference to this function

var html2pdf = (function(html2canvas, jsPDF) {

declared in html2pdf.js.

So I added just after the import declarations in my angular-controller this declaration:

declare function html2pdf(html2canvas, jsPDF): any;

then, from a method of my angular controller I'm calling this function:

generate_pdf(){
    this.someService.loadContent().subscribe(
      pdfContent => {
        html2pdf(pdfContent, {
          margin:       1,
          filename:     'myfile.pdf',
          image:        { type: 'jpeg', quality: 0.98 },
          html2canvas:  { dpi: 192, letterRendering: true },
          jsPDF:        { unit: 'in', format: 'A4', orientation: 'portrait' }
        });
      }
    );
  }

Hope it helps