New to Angular and trying to migrate a website based on jquery to Angular2 and facing issue with java script file included in original project. For example owlCarousel doe not work no matter what I do. I understand there is a angular version of it. But I am trying to make it work without using ng commands in html. What I observed is that though the script gets called, the owlCarousel object never gets initialized. Below is a code snippet from owlCarousel and console log where angular2 is used and not. I see the this element in agular2 never refers to div element and I think it is not initializing the object because of that.
I think I am missing something fundamental. Any help or direction on below will greatly help. I am stuck on this for days now.
Pice of code from owlCarousel:
$.fn.owlCarousel = function (options) {
console.log('fn.owlCarousel2');
console.log( $(this));
return this.each(function () {
console.log('inside');
console.log( $(this));
if ($(this).data("owl-init") === true) {
console.log('fn.owlCarousel false');
return false;
}
$(this).data("owl-init", true);
console.log('fn.owlCarousel object creation');
var carousel = Object.create(Carousel);
carousel.init(options, this);
$.data(this, "owlCarousel", carousel);
});
};
Log from Angular2:
OWL Carousel owl.carousel.js:1451 fn.owlCarousel2
owl.carousel.js:1452 jQuery.fn.init [selector: "#owl-main-demo",
context: document] owl.carousel.js:1451 fn.owlCarousel2
owl.carousel.js:1452 jQuery.fn.init [selector: "#owl-second-demo",
context: document] owl.carousel.js:1451 fn.owlCarousel2
owl.carousel.js:1452 jQuery.fn.init [selector: "#owl-third-demo",
context: document] theme.js:266 Theme.js owl options
owl.carousel.js:1451 fn.owlCarousel2 owl.carousel.js:1452
jQuery.fn.init [selector: "#owl-product-slide", context: document]
owl.carousel.js:1451 fn.owlCarousel2 owl.carousel.js:1452
jQuery.fn.init [selector: "#owl-text-slide", context: document]
owl.carousel.js:1451 fn.owlCarousel2 owl.carousel.js:1452
jQuery.fn.init [selector: "#owl-featured-slide", context: document]
owl.carousel.js:1451 fn.owlCarousel2 owl.carousel.js:1452
jQuery.fn.init [selector: "#owl-blog-slide", context: document]
Log where Angular is not used:
OWL Carousel owl.carousel.js:1449 fn.owlCarousel
owl.carousel.js:1450 jQuery.fn.init [selector: "#owl-main-demo",
context: document] owl.carousel.js:1449 fn.owlCarousel
owl.carousel.js:1450 jQuery.fn.init [selector: "#owl-second-demo",
context: document] owl.carousel.js:1449 fn.owlCarousel
owl.carousel.js:1450 jQuery.fn.init [selector: "#owl-third-demo",
context: document] theme.js:266 Theme.js owl options
owl.carousel.js:1449 fn.owlCarousel owl.carousel.js:1450
jQuery.fn.init [div#owl-product-slide.owl-carousel.product-slide,
selector: "#owl-product-slide", context: document]
owl.carousel.js:1452 inside owl.carousel.js:1453 jQuery.fn.init
[div#owl-product-slide.owl-carousel.product-slide, context:
div#owl-product-slide.owl-carousel.product-slide]
owl.carousel.js:1459 fn.owlCarousel object creation
owl.carousel.js:29 OWL Carousel in init owl.carousel.js:40 OWL
Carousel loadcontent owl.carousel.js:72 OWL Carousel login
owl.carousel.js:103 OWL Carousel onstart
