Native elements in typescript

Question

I am working on a carousel but it is using jQuery, and use of jQuery is discouraged with angular2, although using of jQuery is not working out with dynamic content for me while it works with static images and content.

Here is jQuery code for slider carousel:

$('#myCarousel').carousel({
    interval: 10000
})
$('.fdi-Carousel .item').each(function () {
    var next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    if (next.next().length > 0) {
        next.next().children(':first-child').clone().appendTo($(this));
    }
    else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
});

it is not working with dynamic content, don't know what is the problem cause it is working while use of static content,

I think , some of the functions of jQuery like next(), siblings(), clone(), appendTo are not working. so, I'm trying to find equivalent code of above code with typescript with Renderer and ElementRef but I am stuck.

here is the component in which I'm using slider

import { Component, OnInit, AfterContentInit,ElementRef, AfterViewInit, Renderer,ViewChild } from '@angular/core';
import { Observable,Subscription } from 'rxjs/Rx';
import {QuoteService} from 'app/services/quote.service';
import { asEnumerable } from 'linq-es2015';
declare var $: any;
export class Inclusion
{
    public Help: string;
    public EventType: string;
    public Category: string;
    public Header: string;
    public DaysVisit: string;
}
@Component({
  selector: 'inclusions',
  templateUrl: './inclusions.component.html',
  styleUrls: ['./inclusions.component.css']
})
export class InclusionsComponent implements OnInit {
  @ViewChild('myCarousel') el: ElementRef;
  public inclusions:any;  
  public inclusionList:Inclusion[];  
  public allCat:any;
  public disp_obj =[];
  public test;
  public Incl = [];
  constructor(private quoteService:QuoteService, private renderer:Renderer) {
    this.getInclusion();
   }
  ngOnInit() {
  }
  ngAfterViewInit(){
    console.log(this.el);
      this.renderer.setElementClass(
        this.el.nativeElement,'active',true,
      )
  }
  getInclusion(){
    this.quoteService.getInclusion()
    .subscribe(
      inclusions=> {
        //this.inclusions = inclusions.resultData;
        this.inclusionList = inclusions.resultData.Inclusions;        
        this.Incl = asEnumerable(this.inclusionList).GroupBy(x => x.Category,  x => x,
         (key, b) =>          
         { return { 
           Category: key ,Services: asEnumerable(b).ToArray() }
            })
        .ToArray();

        console.log(this.Incl);
      },
      response => {
       if (response.status == 404) {
          }
      }
    )
  }

}

component html:

 <div class="inclusions_detail_carousel">
      <div class="carousel-indicators">                 
      </div>
      <!--New Carousel-->
      <div class="col-md-12">
         <div class="well">
            <div id="myCarousel" #myCarousel class="carousel fdi-Carousel slide">
               <div class="carousel-indicators">
                 <a class="left carousel-control" href="#eventCarousel" data-slide="prev"><span class="icon-prev"></span></a>
                 <a class="right carousel-control" href="#eventCarousel" data-slide="next"> <span class="icon-next"></span></a>
              </div>
              <div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
               <div class="carousel-inner onebyone-carosel">
                  <div class="item active"  *ngFor="let item of Incl">
                     <div class="col-md-4">
                        <div class="inclusions_bx_detail">
                           <div class="inclusions_bx_detail_title">
                              <div class="inclusions_bx_detail_title_icon">
                                 <img src="images/inclusions_icon1.jpg" alt="">
                              </div>
                              <h3>hotel stay information</h3>
                              <span>Accomodation And Dining</span>
                           </div>
                           <div class="inclusions_detail_img">
                              <img src="images/inclusions_img1.jpg" alt="">
                           </div>
                           <div class="inclusions_detail_img_info scrollbox3">
                              <div class="inclusions_detail_img_info_in">
                                 <img src="images/inclusions_img_icon1.png" alt="">
                                 <span>2 Nights in Pattaya (Day 1, 2)</span>
                              </div>
                              <div class="inclusions_detail_img_info_in">
                                 <img src="images/inclusions_img_icon1.png" alt="">
                                 <span>2 Nights in Bangkok (Day 3, 4)</span>
                              </div>
                              <div class="inclusions_detail_img_info_in">
                                 <img src="images/inclusions_img_icon1.png" alt="">
                                 <span>4 ABFs (Day 1, 2, 3 ,4)</span>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!--New Carousel-->
</div>

Can anyone help me out here?

Thanks

Answer 1

It seemed jquery code was loading before the API call get response for slider,

setting timeout done the job

setTimeout(() => {
       $('#myCarousel').carousel({
        interval: 10000
    })
    $('.fdi-Carousel .item').each(function () {
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));

        if (next.next().length > 0) {
            next.next().children(':first-child').clone().appendTo($(this));
        }
        else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
        }
    });

}, 3000);