Use jquery plugin in ionic

Ionic Framework ionic-v3
1


I want to use this jquery plubing in my ionic project but i’ don’t know how to do it. I’ve installed jquery & it is working fine in project but i don’t know how to use this plugin in Ionic. Here’s the code

<button ion-button (click)="myClick()">OK</button>

public myClick():void
{
    $('<h1 text-center>Archetypes</h1>').printThis();
}

If i run this code in console, it works great but when i try to run it in code, i get the following error

image
image.png750×508 21.1 KB

I don’t know what to do now. Kindly help me.

2

It probably isn’t. The strong recommendation is not to use both jQuery and Angular. Lots of potential performance issues. Better to find (or write) an Angular 2 library that does what you want.

2 Likes
3

npm install jquery --save

typings install dt~jquery --global --save

import * as $ from ‘jquery’ o import $ from ‘jquery’

In your: “home.html”:

<button id=“x” (click)=“changeColor()”>Click Me!

In your: "home.ts":

changeColor(){
$(’#xn’).text(‘white’);
}

Hope this helps you

4

Actually, problem is, if i try in install it. i get following error.

image
image.png1035×363 11.5 KB

So i tried to use it by downloading its js file.

  1. I put it in my assets.
    image

  2. After that, i’ve added it into my index.html
    image

  3. Next, when i try to us it in my .ts file i get error
    image

ifi run above code in my browser’s console, it works like a charm that’s why i said jquery is working fine but its not working in my .ts code.

5

Google “jquery Angular”. It will be hard to find a link that says it is a good idea.

6

Thanks for you reply but I’ve already tried it and it worked without any issue. Actually, i want to use that plugin and i’ve an external .js file. I’ve included external .js from already existing posts. I’ve tried many different methods but don’t know where i’m doing wrong.

7

OK, it may not be good idea, but there must be a way to use this plugins. kindly, help me out as i’m finding very hard.

8

If you understand that it’s a bad idea, why do you persist on attempting to get people to help you do it? Find an alternative that works smoothly with Angular.

9

I use that plugin but only in a project who works with frames… Angular have better ways to do that

10

I’m asking for help coz typescript can communicate with javascript but even after searching for the whole day, i couldn’t do it. That’s why i mentioned all the step which i followed to know where i’m making mistake and I’m asking again for it coz there are thousands of jquery plugins(external js code), atleast there must be a proper solution to use them in angular?

11

Yes, even i’ve used this plugin before but all i want is to use it in my ionic project. Is there no way to use this plugin instead of finding alternate option !!!
Alternate plugin is a second thing, there must be solution to it.
That’s why I’m asking Dear !!!

12

There are thousands of auto parts designed for use in Ferraris. There is no proper solution to use them in Jaguars.

1 Like
13

Haha, good one that!

14

And the experts are telling you that you need to use proper channels for that communication, but I am afraid you are not taking any heed.

When you are developing an ionic app then with common sense we should understand the primary thing to do is follow ionic/angular ways, the other ways are actually secondary (if at all anything).

Having said that, I would like to know as to where did you find this syntax of calling the printThis() method in which you send in the whole tag with content to jquery rather than only the selector ?