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!

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!

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