Invoke JQuery method from Angular 2 component

Question

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';

Alexander Ciesielski · Accepted Answer · 2016-10-20 18:49:50Z

1

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

answered Oct 20, 2016 at 18:49

Alexander Ciesielski

10.8k5 gold badges48 silver badges66 bronze badges

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

1 Comment

Bryan Over a year ago

This gives me a build error that says: "Cannot find module './EditCheckBoxes'

Konstantin Vitkovsky · Accepted Answer · 2016-10-20 20:33:26Z

1

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

edited Oct 20, 2016 at 20:33

answered Oct 20, 2016 at 19:02

Konstantin Vitkovsky

1,23813 silver badges16 bronze badges

7 Comments

Bryan Over a year ago

This gives me a build error that says: "Cannot find module './EditCheckBoxes'

Bryan Over a year ago

I added that to my post

Konstantin Vitkovsky Over a year ago

excuse me for dumb assumption but does your filename match the one you specify in import statement?

Bryan Over a year ago

Yes, sorry I had a typo when I edited my question. I'm not sure whether to include the .js extention when importing it though. If I don't include it, will it assume it's a TypeScript file?

Bryan Over a year ago

Are you sure a JavaScript file can be imported into a TypeScript file?

|

Collectives™ on Stack Overflow

Invoke JQuery method from Angular 2 component

2 Answers 2

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related