Bdtjtk

I'm currently developing an application under angular version 6 which implements a template that had html, css, js, bootstrap and jquery among other technologies dependent on jquery, the problem I have is that I am implementing a slider that came with the template to show some products through NgFor , initially when you load the page does not render neither the images nor the information of the products as such, nor the styles css, but once I reload the page with cache it shows everything correctly, attached code and screenshots, thank you!

 <ng-container>

    <div class="row">

      <div class="col-md-12 col-sm-10 col-xs-6">

        <div class="tab-content">

          <div id="tab3" class="tab-pane active">

            <div class="product-slider  product-slider1">

              <div class="wrap-item" data-pagination="false" data-navigation="true" data-itemscustom="[[0,1],[768,2],[1024,3],[1200,4]]">

                <ng-container *ngFor="let prod of productFinal">

                  <div class="item-product item-product1 style2 text-center">

                    <div class="product-thumb">

                      <a href="/detail" class="product-thumb-link rotate-thumb">

                        <img src="{{prod.images}}" alt="">

                        <img src="{{prod.images}}" alt="">

                      </a>

                      <a href="/quick" class="quickview-link fancybox fancybox.iframe"><i class="fa fa-search" aria-hidden="true"></i></a>

                    </div>

                    <div class="product-info">

                      <h3 class="product-title"><a href="/detail">{{prod.name_product}}</a></h3>

                      <div class="product-price">

                        <ins class="color"><span>€30.000</span></ins>

                      </div>

                      <div class="product-rate">

                        <div class="product-rating" style="width:100%"></div>

                      </div>

                      <div class="product-extra-link">

                        <a href="#" class="wishlist-link"><i class="fa fa-heart-o" aria-hidden="true"></i><span>Wishlist</span></a>

                        <a href="#" class="addcart-link">Add to cart</a>

                        <a href="#" class="compare-link"><i class="fa fa-compress" aria-hidden="true"></i><span>Compare</span></a>

                      </div>

                    </div>

                  </div>

                </ng-container>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </ng-container>

No-Rendered Products

Rendered Products