I'm working on a project where I have 4 images and a carousel that needs to navigate to the respective index when one of the images is clicked. The challenge is that the carousel is built with Bootstrap and jQuery, but the rest of the application is Angular. To try and solve this, I am using elementRef to select the carousel component. However, I am struggling to change the slides as desired. When I console.log the ElementRef, I only see the HTML. Is there a more effective approach to achieve this?
component.html
<!-- Carousel -->
<div *ngIf="collection === 'Boudoir'" class="card img-row ">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-80" src="" alt="Fourth slide">
</div>
</div>
</div>
</div>
<div *ngIf="collection === 'Boudoir'"class="img-row picsRow">
<li class="img-column pics">
<img class="gallery" src="" (click)="CarouselChange(1)">
<img class="gallery" src="" (click)="CarouselChange(2)">
<img class="gallery" src="" (click)="CarouselChange(3)">
<img class="gallery" src="" (click)="CarouselChange(4)">
</li>
</div>
component.ts
@ViewChild('carousel') carouselElementRef: ElementRef;
CarouselChange(index) {
console.log(index);
console.log(this.carouselElementRef.nativeElement);
}