angular 2 owlCarousel is not a function

Question

I'm trying to use owlcarousel 2 along with angular 4. I have the following setup:

.angular-cli.json:

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

offers-component.ts:

import { Component, AfterViewInit } from '@angular/core';


declare var $: any;

@Component({
  selector: 'home-offers-container',
  templateUrl: '../templates/home-offers-container.template.html',
  styleUrls: ['../css/home-offers-container.component.css']
})

export class HomeOffersContainerComponent implements AfterViewInit {
  ngAfterViewInit() {
    $('.owl-carousel').owlCarousel();
  }
}

template.html

<div class="row">
    <div class="container">
      <home-offers class="owl-carousel"></home-offers>
    </div>
</div>

I get an error ERROR TypeError: $(...).owlCarousel is not a function. I don't see why this error should pop up. I've ordered the scripts as it should be - first jquery then owlcarousel. Moreover typescritp does not give any error on jQuery. Am I missing anything / not loading owlCarousel properly?

Do I have to import jQuery / owlCarousel in the app.module.ts? If yes, any suggestions on how?

Answer 1

Using jQuery for DOM manipulation with Angular is not the right approach.

You can reach your DOM elements by using ViewChild decorator in this way:

@Component({
    ....
    templateUrl: 'mytemplate.html'
})

export class MyComponent{
  @ViewChild('selector') private elementName;
  ngAfterViewInit() {
     //this is your dom
     this.elementName.owlCarousel();
  }
}

and in your template class you got to specify who is that selector

<home-offers class="owl-carousel" #selector> </home-offers>

Answer 2

Instead of directly accessing the class in ViewInit

try and make use of ViewChild like

<home-offers class="owl-carousel" #owl></home-offers>

@ViewChild('owl')owl:ElementRef;

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

Answer 3

Carousel worked for me with following changes

- import * as $ from 'jquery';

- import 'owl.carousel';

+ declare var $: any;

Rest of the component code is the same

import { Component, AfterViewInit } from '@angular/core';


declare var $: any;

@Component({
  selector: 'home-offers-container',
  templateUrl: '../templates/home-offers-container.template.html',
  styleUrls: ['../css/home-offers-container.component.css']
})

export class HomeOffersContainerComponent implements AfterViewInit {
  ngAfterViewInit() {
    $('.owl-carousel').owlCarousel();
  }
}

Posting this answer to help people in future.

https://github.com/dereklin/angular-cli-owl-carousel/commit/bd6b30acfee00f60516b541a4da6c5608a2b7b25

Answer 4

Only that you need is install this module npm install --save-dev @types/owlcarousel Regards