Owl carousel not working when code is moved to an Angular component

Question

My Angular Version: Angular 7

I just started learning Angular and I'm trying to use a downloaded Bootstrap template in my Angular project. My owl-carousel works great when it's on index.html in my Angular project. But it does not when it's moved to a new component. I'll be providing the steps I followed. Kindly help me troubleshoot

Step 1: I copied all assets (JS, CSS & Images) to the assets folder under src in Angular

Step 2: Copies the code in index.html in the template to the angular index.html and changed the 'src' for images and JS files in index.html

• At this point, everything works PERFECT!

Step 3: Since it's not a good practice to keep everything in one file so I tried to refactor the code by moving the home-slider which is based on 'owl-carousel' to a component called 'home' as below

Below is the entire code in home-component.html and all imports such as Javascript and CSS are already in index.html of my Angular Project

<!-- Welcome Area Start -->
<section class="welcome-area">
  <div class="welcome-slides owl-carousel">
      <!-- Single Welcome Slide -->
      <div class="single-welcome-slide bg-img bg-overlay" style="background-image: url(./assets/macbook-1.jpg);" data-img-url="macbook-1.jpg">
          <!-- Welcome Content -->
          <div class="welcome-content h-100">
              <div class="container h-100">
                  <div class="row h-100 align-items-center">
                      <!-- Welcome Text -->
                      <div class="col-12">
                          <div class="welcome-text text-center">
                              <h6 data-animation="fadeInLeft" data-delay="200ms">Creativity &amp; Excellence</h6>
                              <h2 data-animation="fadeInLeft" data-delay="500ms">Welcome to to my Web</h2>
                              <a href="#" class="btn roberto-btn btn-2" data-animation="fadeInLeft" data-delay="800ms">Explore our work</a>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>

      <!-- Single Welcome Slide -->
      <div class="single-welcome-slide bg-img bg-overlay" style="background-image: url(./assets/macbook-1.jpg);" data-img-url="macbook-1.jpg">
          <!-- Welcome Content -->
          <div class="welcome-content h-100">
              <div class="container h-100">
                  <div class="row h-100 align-items-center">
                      <!-- Welcome Text -->
                      <div class="col-12">
                          <div class="welcome-text text-center">
                              <h6 data-animation="fadeInDown" data-delay="200ms">Hotel &amp; Resort</h6>
                              <h2 data-animation="fadeInDown" data-delay="500ms">Welcome To my Web </h2>
                              <a href="#" class="btn roberto-btn btn-2" data-animation="fadeInDown" data-delay="800ms">Discover Now</a>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>

I expected the code to have a working owl-carousel slider when the component is selected in app-component.html using <app-home></app-home> but the actual output just gives nothing.

Note: The selector is right as if I give plain text and call the selector as <app-home></app-home> in app-component.html it works but not the owl-carousel

Thanks in advance.

Answer 1

when are you initialising the owl carousel? because index page loads with the application and hence its working in index, but component page only loads when its navigated so you need to call owl initialising explicitly after component is loaded into DOM

$(".owl-carousel").owlCarousel();