jquery bootstrap in angular2 selecting carousel image index

Question

Trying to replicate this simple jquery snippet I have from my old project into angular2. Basically selecting a carousel image index onclick="" or (click)="" .

In jQuery its simple as the code below, however when I do the same in angular2 I get .carousel() is not a function. I've imported jQuery and bootstrap but the snippet below doesn't seems want to work.

// this works on plain jquery
selectImage = function() {
 $('#myCarousel').carousel(2)
}

in my angular2 its pretty similar:--

import { carousel } from 'bootstrap';
import $ from "jquery";
declare var carousel: any;

// doesn't work shows the error below
selectImage() {
 $('#myCarousel').carousel(2);
}

Trying to select image from this div

<button (click)="selectImage()"> Select image (2)</button>

<div class="carousel slide" id="myCarousel">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item" data-slide-number="0">
            <img src="./assets/imgs/4d4853533136_01-lg.jpg"></div>

        <div class="item" data-slide-number="1">
            <img src="./assets/imgs/4d4853533136_03.jpg"></div>

        <div class="item" data-slide-number="2">
            <img src="./assets/imgs/4d4853533136_02.jpg"></div>

        <div class="item" data-slide-number="3">
            <img src="./assets/imgs/4d4853533136_04.jpg"></div>
    </div>
</div>

Error message: ERROR TypeError: __WEBPACK_IMPORTED_MODULE_3_jquery___default(...)(...).carousel is not a function

Question is how can I do the same function as my jQuery snippet in angular2?

Bootstrap select specified image number Ref

Answer 1

You have to use [(activeSlide)]="activeSlideIndex" as below. Set "activeSlideIndex" in your click event Or any other event as per requirement

<carousel [interval]="myInterval" [noWrap]="noWrapSlides" [(activeSlide)]="activeSlideIndex">
 <slide *ngFor="let slide of slides; let index=index">
     <img [src]="slide.image">

     <div class="carousel-caption">
       <h4>Slide {{index}}</h4>
       <p>{{slide.text}}</p>
     </div>
   </slide>
</carousel>