I am working in angular 5 project, and added a javascript custom in assets > js > myfile.js.
I created component and want to get that value from myfile.js in my component.ts file.
In your component, below your imports, add this
declare let DiagramEditor: any;
You could even declare it as a Function and specify parameter types.
Then just call that function in your component
DiagramEditor(myConfig, ui, ()=> { /* callback code*/ })
Related
I have a function inside a .js file in a nuxt 2 project.
Basically I need to use a nuxt module property from nuxt.config like this this.nuxt.options. inside a function in a normal .js file.
For example:
aNormalJsFile.js
if (this.nuxt.options.module.triggers.isActive) {
// do something
}
But now I can't because it doesn't know what is Nuxt of course. I'm getting this error:
Cannot read properties of undefined (reading 'nuxt')
If you want to inject a Vue/Nuxt instance inside of a .js file (vanilla JS), you can follow this helper function approach
/src/utils/printCoolNumber.js
export const printIt = (VueInstance) => console.log(VueInstance.coolNumber)
// ☝🏻 basically does console.log(this.coolNumber) as in a .vue file
Any .vue file
<script>
import { printIt } from "#/utils/printCoolNumber";
export default {
data() {
return {
coolNumber: 12,
};
},
mounted() {
printIt(this) // 👈🏻 Vue instance ("this") passed here, it prints 12 in the console
},
};
</script>
I wouldn't say that this is the best approach in the long run (using Composables is usually still better) but it is great for small helper functions where you don't need too much Vue-specific methods.
I am trying to load a custom JS file into my vue and I recently came across vue-plugin-load-script and installed it. I configured it as below:
In my main.js I have
Vue.loadScript("file.js").then(() => {
console.log("SUCESS")
}).catch(() => {
console.log("FAILED")
})
however, the npm page does not show how to use your functions in your views. For instances, lets say the file.js had a function called calculateTime(), and I have a view called Home.vue. How would I call the calculateTime() function from my
<script>
export default {
methods : {
** Trying to put function here **
}
}
</script>
If you have you JS File local, you can import it, like:
import * as localA from "./../../theFile.js"; /*put your path to file.js*/
And after that you can use all methods from theFile.js by writting in a method from your vue Component
methodVue: function (...) {
localA.theMethod(param); /*the Method is declared in theFile.js*/
return;
}
And in your theFile.js your method that you want to use need to be written like that
export function theMethod(param) {
...
}
Do you have a specific reason to use this library? Looking at the function all it does is add a script tag to the DOM if it is not already there and resolve the promise when it loads GitHub link. You could just as well use import * from 'file.js' at the top of the vue file. Then use the functions from that file as usual. The bundler should be able to figure out if the file is imported in multiple places and add it only once.
I am new to angular 5. I am working on ng2-pdf-viewer. I need to invoke one of its method updateSize() in that plugin from my component. Can anyone tell me how can I access it from a component.
Here is the link of the plugin
https://www.npmjs.com/package/ng2-pdf-viewer
You can use a template reference variable to access the public methods of ng2-pdf-viewer
Add a template variable named #pdfViewer in the html file like so
<pdf-viewer
#pdfViewer
[src]="reportObject.src"
[page]="reportObject.currentPage"
[render-text]="true"
>
</pdf-viewer>
Use ViewChild decorator to reference it inside your component.
import { PdfViewerComponent } from 'ng2-pdf-viewer';
import {ViewChild} from '#angular/core';
#ViewChild('pdfViewer') pdfComponent: PdfViewerComponent;
You can now access the methods of ng2-pdf-viewer using the pdfComponent variable like so
this.pdfComponent.updateSize();
You can probably achieve this by using ViewChild.
In you html template where you use pdf-viewer, write it as something like this <pdf-viewer [src]="src"[original-size]="false" #pdfViewer></pdf-viewer>.
Add #ViewChild('pdfViewer') pdfViewer into your component.
After that, you should be able to use the method like this this.pdfViewer.updateSize() and also methods inside the pdfViewer.
I have an external js file with a bunch of jQuery methods for the user interface. However, the Angular router is asynchronous, so user interface elements on other pages do not get properly rendered by the script, since they don't yet exist in the DOM.
Formerly, I was cherry picking some methods from the script and adding them to a method called rerender, but this is becoming cluttered.
My question was to see if there is a way to load and execute the entire script again inside of the rerender method?
You can import external scripts. Do it inside the constructor:
constructor() {
System.import('script-loader!bower_components/fullcalendar/dist/fullcalendar.min.js').then(()=>{
this.render(); // Do whatever, for demonstration I call a render() method
})
}
Make sure in your custom-typings you have declared System:
declare let System: SystemJS;
interface SystemJS {
import: (path?: string) => Promise<any>;
}
interface GlobalEnvironment {
SystemJS: SystemJS;
System: SystemJS;
}
Option 2:
Alternatively, you can put this into your module after the import statements:
require('bootstrap/js/tooltip.js'); // For example
I'm working on creating an Angular 2 front end on an existing project that previously just used JQuery. Is it possible to invoke a JQuery method inside of an Angular 2 component, when that JQuery function exists in a separate file? I'm writing my components in TypeScript, in case that is important to know.
For example, I have a JavaScript file called EditCheckBoxes.js with a method called editCheckBoxes(). In order for editCheckBoxes() to work, I need it to be invoked after a certain component is initiated. My attempted solution was this:
ngOnInit(): void {
editCheckBoxes();
}
This code gives me the following error:
Cannot find name 'editCheckBoxes'.
Is there any way I can get this to work?
Also, I added declare var $: any; to my component file, so I am able to use JQuery within that component, but I'd rather not copy entire files into my components in order to use them.
EDIT:
The folder structure looks like this:
Plan
app
selling
My Angular 2 component
Scripts
EditCheckBoxes.js
In my component, the import statment looks like this: import { editCheckboxes } from '../../Scripts/EditCheckboxes';
You need to import the editCheckboxes method in your typescript file for it to be available.
To do that you first need to export the editCheckboxes function from EditCheckBoxes.js
export function editCheckboxes() { ... }
Next you should just import that function inside your component
import { editCheckBoxes } from './EditCheckBoxes';
Now it can be called in your component: editCheckBoxes();
In order to import function from js file you should at first export it like so:
// EditCheckBoxes.js
module.exports = function editCheckBoxes () { ... };
then add a d.ts file in same directory as your js-file with definition of your module that would be used by Typescript
// EditCheckBoxes.d.ts
declare function editCheckBoxes (): void;
export = editCheckBoxes;
then in your Typescript file you would specify your definition file, import your function and use it like so:
/// <reference path="../../Scripts/EditCheckBoxes.d.ts" />
import editCheckBoxes = require('../../Scripts/EditCheckBoxes');
ngOnInit (): void {
editCheckBoxes();
}