CODEWITHSUNDEEP
angulartypescriptionic2
Athinodoros Sgouromallis
Athinodoros Sgouromallis

Reputation: 185

Ionic 2 using third party js libs

I am trying to use DrumJs in an ionic 2 project and this library requires to run $("select").drum() when the document is ready but even though i have it in a $(document).ready(function().....) it runs before the document Any ideas where to add this in order to run properly?

p.s. I can not import it in my .ts file so i'm using gulp to concatenate some js files that I import via the index.html

Upvotes: 1

Views: 408

Answers (3)

Juan Camilo Guarin P
Juan Camilo Guarin P

Reputation: 183

In short, you have to check if DrumJs has a definition file to use the library with Typescript, install that definition package (with file ending .d.ts), and then import the library to your script.

Step by step

  1. To do so, you must install typings, which is like a npm for those definitions. To install it, do npm install -g typings.

  2. After installed, check if DrumJS has a definition by executing typings search drumjs on your terminal. Try drumjs, drum, drum.js, maybe one of those matches your desired library.

  3. If the library exists, install it by running on your local folder typings install drumjs --save. If you have any problem, then try typings install drumjs --save --global, or read the documentation of typings if you encounter any further error.

  4. Once the definition is installed, you can install the script from npm, running npm i --save drumjs (i suppose that's the name of the package)

  5. Finally, after installing the package and it's definition, import it to your .ts script at the top of the file like: import * as drum from 'drumjs';

  6. Use drumJS :D

Going further

If you need Jquery for initializing drumJS, then import it in the same way I told you, and write a method ngOnInit() in your .ts script.

Then, write the $("select").drum() inside it. Somethink like this:

class YourClass{
  ...

  ngOnInit(){ $("select").drum() }      

  ...
}

Also, check the lifecycle methods for Angular2, there's ngOnInit, but there are also others which may be more suitable for this situation.

Upvotes: 1

Athinodoros Sgouromallis
Athinodoros Sgouromallis

Reputation: 185

the problem is that i can only import it in the html else i have to make a d.ts file to import in in the code (typescript file) and they load async so there is a race condition I could over come with a setTimeout() but I really don't like this solution, so i decided to drop the try and try to make a new plug-in of my own.

Upvotes: 0

edi_smooth
edi_smooth

Reputation: 1586

Try to run your code using one of the lifecycle events, i.e.:

ionViewLoaded() {
    $("select").drum();
}

Here is the documentation:

http://ionicframework.com/docs/v2/api/components/nav/NavController/#lifecycle-events

Upvotes: 1

Related Questions