Base solution for your next web application
Open Closed

How to install owl-carousel in Angular #6441


User avatar
0
affern created

Hello

I'm trying to install owl-carousel in my solution but I get error message Property 'owlCarousel' does not exist on type 'JQuery'. If i put this code in typings.d.ts: interface JQuery { owlCarousel(...any): any; }

then I get this error: TypeError: owl.owlCarousel is not a function I have this code in my component:

import * as $ from 'jquery'; import 'owl.carousel/dist/assets/owl.carousel.css'; import 'owl.carousel';

export class SiteComponent extends AppComponentBase implements OnInit, AfterViewInit { @ViewChild('owl') owl: ElementRef;

ngAfterViewInit() { $(this.owl.nativeElement).owlCarousel(); }

.angular-cli.json:

"styles": ["../node_modules/owl.carousel/dist/assets/owl.theme.default.css"] "scripts": ["../node_modules/jquery/dist/jquery.js", "../node_modules/owl.carousel/dist/owl.carousel.js" ],

        Any ideas? 

4 Answer(s)