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
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
