Owl Carousel Slider Not Working Inside Angular Component But Working in Index.html

Question

I am working on angular 8 project. I have downloaded a sample html template from other website and integrated it in angular 8 project by creating components. I have set all the css and javascipts inside angular.json file. I have also used allowjs =true inside tsconfig.json file. Below is my a part of my angular.json file:

 "styles": [
          "src/styles.css",
          "src/assets/css/bootstrap.min.css",
          "src/assets/css/animate.css",
          "src/assets/css/owl.carousel.min.css",
          "src/assets/css/all.css",
          "src/assets/css/flaticon.css",
          "src/assets/css/themify-icons.css",
          "src/assets/css/magnific-popup.css",
          "src/assets/css/slick.css",
          "src/assets/css/style.css"
        ],
        "scripts": [
          "src/assets/js/jquery-1.12.1.min.js",
          "src/assets/js/popper.min.js",
          "src/assets/js/bootstrap.min.js",
          "src/assets/js/jquery.magnific-popup.js",
          "src/assets/js/owl.carousel.min.js",
          "src/assets/js/jquery.nice-select.min.js",
          "src/assets/js/slick.min.js",
          "src/assets/js/jquery.counterup.min.js",
          "src/assets/js/waypoints.min.js",
          "src/assets/js/contact.js",
          "src/assets/js/jquery.ajaxchimp.min.js",
          "src/assets/js/jquery.form.js",
          "src/assets/js/jquery.validate.min.js",
          "src/assets/js/mail-script.js",
          "src/assets/js/custom.js"
        ]
      },

I don't wanted to install owl carousel if i have its external js in my solution. I just want to make it work. My issue over here is that the code for slider works smoothly when i place it inside index.html. But it does not works if i place it inside app.component.html or any other html file. Below is the slider code:

 <!-- client review part here -->


<section class="client_review">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="client_review_slider owl-carousel">
                    <div class="single_client_review">
                        <div class="client_img">
                            <img src="img/client_2.png" alt="#">
                        </div>
                        <p>Stuff.</p>
                        <h5>- Mike Tayson</h5>
                    </div>
                     <div class="single_client_review">
                        <div class="client_img">
                            <img src="img/client_2.png" alt="#">
                        </div>
                        <p>Stuff.</p>
                        <h5>- Mike Tayson</h5>
                    </div>
                    <div class="single_client_review">
                        <div class="client_img">
                            <img src="img/client_2.png" alt="#">
                        </div>
                        <p>Stuff.</p>
                        <h5>- Mike Tayson</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- client review part end -->

Answer 1

The same thing happened with me when I moved some code from a ready made html css template to angular component, I solved my problem from here: Owl carousel not working when code is moved to an Angular component,

It was only showing the carousel, The buttons were still not visible, So, I looked into inspect element and found that buttons were being disabled. So, I found solution for button here: https://www.gitmemory.com/issue/OwlCarousel2/OwlCarousel2/1809/480576398.

Still, Instead of previous and next icons it was showing me text in button as "prev" and "next", So, I found the solution for that problem here: https://github.com/OwlCarousel2/OwlCarousel2/issues/1354.

So, my final code is this:

//Declare jquery
declare var jQuery: any;

 ngAfterViewInit() {
(function ($) {
  $(document).ready(function () {
    $('.owl-carousel').owlCarousel({
      nav: true,
      navText: ["<i class='lni-chevron-left'></i>", "<i class='lni-chevron-right'></i>"],
      items: 3,
      loop: true,
      center: true,
      margin: 0,
      lazyLoad: true,
      dots: false
    });
  });
})(jQuery);

just put this code in your component, hope it helps.