3

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?

Ishan Khare
  • 1,745
  • 4
  • 28
  • 59

4 Answers4

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

Community
  • 1
  • 1
Manwal
  • 23,450
  • 12
  • 63
  • 93
0

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();
  }
Rahul Singh
  • 19,030
  • 11
  • 64
  • 86
  • 1
    the problem is, it seems *owlCarousel* is not registering itself properly. If, after the page has loaded and I try in the chrome console - `$('.owl-carousel').owlCarousel()` I still get the same error. – Ishan Khare Sep 15 '17 at 13:53
0

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>
Peter
  • 10,492
  • 21
  • 82
  • 132
0

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

Alex Hurtado
  • 1