Owl carousel in Angular 7

Question

I use the Owl carousel in Angular 7. In First I install With

 npm install ngx-owl-carousel owl.carousel jquery --save

Then add

 "scripts": ["./node_modules/jquery/dist/jquery.min.js",
 "./node_modules/owl.carousel/dist/owl.carousel.min.js"]

In angular.json file and add

import { OwlModule } from 'ngx-owl-carousel';
imports: [
 BrowserModule,
 OwlModule
]

in app.module.ts file Then I Used

public ngOnInit()
{
 /*----------------------------
        Slideshow
    ------------------------------ */
    $('.slideshow').owlCarousel({
      items: 6,
      autoPlay: 3000,
      singleItem: true,
      navigation: true,
      navigationText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
      pagination: true
  });
}

In app.component.ts file, But I have error

core.js:14576 ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_2__(...).owlCarousel is not a function

where am I mistake ? Please help me. Thanks.

Answer 1

After importing OwlModule you are able to use its exported components inside your Angular templates like below (example taken from github repo):

   <owl-carousel
     [options]="{items: 3, dots: false, navigation: false}"
     <!-- If images array is dynamically changing pass this array to [items] 
     input -->
    [items]="images"
    <!-- classes to be attached along with owl-carousel class -->
      [carouselClasses]="['owl-theme', 'row', 'sliding']">
    <div class="item" *ngFor="let image of images;let i = index">
       <div class="thumbnail-image" [ngStyle]="{'background': 'url(abc.jpg) 
       no-repeat scroll center center / 80px 80px'}"></div>
    </div>
   </owl-carousel>