How to change bootstrap carousel items Angular

I have 4 images and when I click and the images I want the carousel to navigate to that respective index. Since bootstrap's carousel works with jquery and this is an Angular application, I am using elementRef to select the carousel component. However, I cannot figure out a way to change the slides. All I get when I console.log the ElementRef is the html. Is there a better way to do 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);
  }

There is an Angular library for working with Bootstrap, NG-Bootstrap. I think you would be better off using that than trying to manipulate the DOM directly.

They have support for the Bootstrap Carousel as well, found here: https://ng-bootstrap.github.io/#/components/carousel/examples

If you really insisted on doing the basics of this yourself, you need a way to mange the "active" css class on the carousel items.

Something like this could get you going in the right direction, but the Bootstrap carousel has more features other than just showing/hiding a particular slide:

Your component.ts file

currentIndex: number = 1;
CarouselChange(index) {
    this.currentIndex = index;
}

Your template

<!-- 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" [class.active]="currentIndex === 1">
                      <img class="d-block w-100" src="" alt="First slide">
                    </div>
                    <div class="carousel-item"  [class.active]="currentIndex === 2">
                      <img class="d-block w-100" src="" alt="Second slide">
                    </div>
                    <div class="carousel-item"  [class.active]="currentIndex === 3">
                      <img class="d-block w-100" src="" alt="Third slide">
                    </div>
                    <div class="carousel-item"  [class.active]="currentIndex === 4">
                      <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>

To make it better, you should probably loop through in your template so you can dynamically add any number of items, or use the NG-Bootstrap library