Ionic2 How to use JQuery Plugin in Page

Question

I'm a newbie of ionic 2, i create project and need to jquery plugin link colorbox, slick-carousel...

I've run the command in a terminal

npm install jquery slick-carousel
typings install jquery --ambient --save
typings install slick-carousel --ambient --save

I have imported the JQuery:

import * as JQuery from 'jquery';
import * as slick from 'slick-carousel';

Then ionic error is: Can not find module 'slick-carousel'.

Please help me solve this problem, or have examples ready so I can refer to.

Thanks all!

Wynny

Answer 1

Since slick-carousel doesn't have any exported modules (it just adds chainable functions onto jQuery) the method for importing it is different. Here's a minimal example:

// app/pages/carousel/carousel.ts
import { Component } from "@angular/core";
import { NavController } from "ionic-angular";
import * as $ from "jquery";
import "slick-carousel";

@Component({
    templateUrl: "build/pages/carousel/carousel.html"
})
export class CarouselPage {

    constructor(public nav: NavController) {}

    ionViewLoaded() {
        $(".myCarousel").slick();
    }
}

Note that we add the carousel initialization to the ionViewLoaded() event handler to make sure the DOM is loaded. And then the template:

<!-- app/pages/carousel/carousel.html -->
<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Carousel</ion-title>
</ion-navbar>

<ion-content padding class="carousel">
  <div class="myCarousel">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
</ion-content>

And finally, makes sure you import the CSS by adding this to your app/theme/app.core.scss file:

@import "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css";

Have fun!

Coronel

And how to use jquery colorbox in ionic. I import and use, but error: TypeError: $(...).colorbox is not a function import * as $ from 'jquery'; import 'jquery-colorbox'; use: ngAfterViewInit() { $('.colorbox').colorbox(); } – Wynny

As best as I can tell, the jquery-colorbox plugin has not been updated to work with any of the module loading schemes (Node, AMD, UMD, etc.). You might take a look at angular-colorbox which appears to be a rewrite designed to work with Angular. Conversely, you might also look at using Ionic2 slides which is native to the framework and designed to do what jquery-colorbox does. – Coronel

I'm seeing the same issue as @JLamp07 with the iframe-resizer plugin. Unfortunately angular-colorbox (at least the github project you linked to @morphatic) is specific to angular 1, which does not use webpack by default, so it is not helpful in this case from what I can see. Has anyone come across a solution? – Tabshey

@Coronel I am adding flipclock and followed your steps but still getting error "Cannot find module "flipclock"". Please help me if you have any idea. – Emptyheaded

@vedankitakumbhar did you install flipclock as you would any other module, i.e. npm install -S flipclock? That package looks like it hasn't been updated in several years. See my earlier comment, that not all packages have been updated to use a module loading scheme. This might be one of those. – Coronel

Thanks @morphatic. Do you know any countdown plugin with some advance effects that I can use in Ionic2? – Emptyheaded

Sorry, no, not really. – Coronel

Answer 2

If anyone it reading this in 2017:

The page event ionViewLoaded() is not valid anymore. It is ionViewDidLoad() in the current RC4 version.

For future reference: http://ionicframework.com/docs/v2/api/navigation/NavController/#lifecycle-events

Julietjulieta