How to use jquery plugins (like Owl Carousel 2) with angular 4 in typescript class ?

[mehmood ahmed]

I am trying to use jQuery plugins with angular 4 typescript class but unfortunately i am not successful to attain my objective.

I tried in many ways but angular 4 html component view didn't allow jQuery ready/other events so how can i use them?

I have currently created a component typescript class and tried to use jquery function in it but couldn't get success.

please see my code below :

 import { Component, Input, ElementRef, HostBinding } from '@angular/core';
import * as $ from 'jquery';
import 'owl-carousel';

@Component({
  selector: 'owl-carousel',
  template: `<ng-content></ng-content>`
})
export class OwlCarouselComponent {
    @HostBinding('class') defaultClass = 'owl-carousel';
    @Input() options: Object;

  $owlElement: any;

  defaultOptions: any = {};

  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    // use default - empty
    // for (var key in this.options) {
    //   this.defaultOptions[key] = this.options[key];
    // }
    this.$owlElement = $(this.el.nativeElement).owlCarousel(this.defaultOptions);
  }

  ngOnDestroy() {
    this.$owlElement.data('owlCarousel').destroy();
    this.$owlElement = null;
  }
}

Visual Studio compiler display the red error on this line.

this.$owlElement = $(this.el.nativeElement).owlCarousel(this.defaultOptions);

and error messages are :

Severity Code Description Project File Line Suppression State Error TS2339 Build:Property 'owlCarousel' does not exist on type 'JQuery'. On.Store.UI L:\ESaleStore\On.Store.UI\src\On.Store.UI\wwwroot\app\shared\OwlCarousel.component.ts 24
Error TS2339 Property 'owlCarousel' does not exist on type 'JQuery'. On.Store.UI (tsconfig project) L:\ESaleStore\On.Store.UI\src\On.Store.UI\wwwroot\app\shared\OwlCarousel.component.ts 24 Active

this is my tsconfig.json

  {
  "compilerOptions": {    
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules"
  ]
}

and this is my systemjs.config.js file

`/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
            jquery: 'npm:@angular/jquery/dist/jquery.min.js',
            'owl-carousel': 'npm:@angular/owl.carousel/dist/owl.carousel.min.js' 
        },
        meta: {
            'owl-carousel': {
                deps: ['jquery']
            },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);

`

Kindly guide me . thank you

[Sander Elias]

Hi Mehmood,

It is possible to declare vars in TS. you do it like:

declare var someGlobal : fittingType

I'm pretty sure there is a way like that you can define the added method on an existing type, but I'm currently lacking the time to dig into this now.

Regards

Sander

[Sander Elias]

Hi Mehmood,

https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md#121-ambient-declarations might help!