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.
To do load JavaScript files in a component, you have to do it manually inside the TypeScript file. Go into the app component TypeScript file and create a script element object. Then set the value of the src property to the path of the JavaScript file you want to load. This can be a URL or a local path in the project.
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';
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With