How can i use jquery owlCarousel in Angular 4 Project

i have my 'carousel.js' file as

$('#owl-carousel-1').owlCarousel({...});


and carousel.component.html as:

<div id="owl-carousel-1" class="owl-carousel owl-theme center-owl-nav home-
carousel">....</div>


i have called 'carousel.js' file in carousel.component.ts as:

ngAfterViewInit(){
require("../../../assets/js/carousel.js");
}


it's work once and once again not work !!!

can anyone help me ... thanks ...

1 Answer
1

You should follow below steps to use it in npm based angular project
Install npm module

npm install --save owl.carousel

npm install jquery


Include js flies in angular-cli.json scripts sections and declare them.

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


HTML CODE

<div class="owl-carousel" #carousel>
<div> Your Content 1 </div>
<div> Your Content 2 </div>
<div> Your Content 3 </div>
<div> Your Content 4 </div>
<div> Your Content 5 </div>
<div> Your Content 6 </div>
<div> Your Content 7 </div>
</div>


for Jquery

declare var $: any;


Then use .owlCarousel({...} to apply owlCarousel.

.owlCarousel({...}

Component.ts

import { Component, AfterContentInit, ViewChild, ElementRef } from '@angular/core';
declare var $: any;

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentInit{

@ViewChild('carousel') el:ElementRef;
ngAfterContentInit(): void {
console.log(this.el);
$(this.el.nativeElement).owlCarousel();
}
}


Here is the Github Link for an working example.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.