Jquery in Ionic and Typescript

Hi,
I am not able to call $(jQuery) method to update css.

My project is into Ionic 2 Angular 2 and Typescript.

We have many reusable code written in Jquery which we want to access.
Example I am passing Userindex value to increase and decrease width dynamically.
But $ this one is giving error.

$(".index_bar").css({ “width”: this.UserIndex + “%” });

Question:-

  1. $(".index_bar").css({ “width”: this.UserIndex + “%” }); how to make it working in Ionic 2.

2.How to update css value using typescript?

Please help.

You don’t need jQuery to update your DOM elements.

I use a progress bar in my file transfer upload example. See the html and typescript to see how I update the progress. If you want a more detailed example I’d like to see some code (your html and typescript) to get me started.

If you really insist on using jQuery; without knowing the error you have gotten it is highly likely that you forgot to import jQuery in your typescript file.

First install the package.

npm install jquery --save

Install (typings and) the typings file

npm install -g typings
typings install dt~jquery --global --save

and finally, import the jquery to your ts file

import * as $ from 'jquery'
9 Likes

Thanks a ton.You saved my day.By the way i used Angular style but i have many jquery library which i wanted to use to save development time.

This seems to be changed in RC.0 and should be implemented on other way now, did anyone tried so far?

The solution above is not working anymore with Ionic2 RC.1:

Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Distributor ID: Ubuntu Description: Ubuntu 16.04.1 LTS
Node Version: v4.2.6

What should I do? @nadreal1010 did you find any solution?

Nope, nothing yet and I’m not optimistic about this

Try this for RC.1:

import jQuery from "jquery";

Then, instead of using $, use jQuery. For example:

jQuery('#my-element').doStuff();

You could import $, but to avoid conflicts you’re probably best just going with jQuery.

Note: Ionic currently has a bug where the DOM isn’t ready on ionViewDidLoad (see here). So you might need to wrap your code in a timeout:

setTimeout(() => {
  jQuery('#my-element').doStuff();
}, 100);
3 Likes

@levymetal This worked for me, thanks.

hi . thanks for your help and also codes.

what kind of stuff() we able to do in jquery>inonic2 ?

for example :

jQuery(this.vidi.nativeElement).on( “click”, function() {
console.log(‘sdfsdgertr’); // this works
this.dolog(‘test’); // this dialog show function doesn’t work
});

functions not work.

i put that code inside ngAfterViewInit .

thanks.

1 Like

Ah, I think you’ll find the problem is the way jQuery handles this. Inside a handler, jQuery assigns this to the matched element, so in your case, this refers to this.vidi.nativeElement, not the class.

Something like this might work, although I haven’t tested it:

export class MyPage {
  vm = this;
  
  ionViewDidLoad() {
    setTimeout(() => {
      jQuery(this.vidi.nativeElement).on("click", function() {
        vm.dolog('test');
      });
    }, 100);
  }
}

However, the real question is why you’re binding a click event with jQuery rather than Angular? IE:

<video (click)="doStuff()">...</video>

Or if you need to bind the event dynamically in your component instead of the template, https://stackoverflow.com/questions/35080387/dynamically-add-event-listener-in-angular-2

it’s working !!!


Getting this error, can you help ?

Post text as text, not images. You should look for Angular alternatives very seriously before trying to jam jQuery into an Angular app.