title: Angular bootstrap Carousel- How to move to next image of ng-bootstrap carousel in an angular component?
body: <p>I am using ng-bootstrap plugin with Angular 7 to create a carousel.
  Following is the HTML:</p>
  
  <pre><code>&lt;ngb-carousel *ngIf="images" (slide)="onSlide($event)"&gt;
    &lt;ng-template ngbSlide *ngFor="let image of images"&gt;
      &lt;img [src]="image" alt="Random slide"&gt;
      &lt;div class="carousel-caption"&gt;
        &lt;h3&gt;{{image.id}}&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/ng-template&gt;
  &lt;/ngb-carousel&gt;
  </code></pre>
  
  <p>I have the onSlide function in my component as:</p>
  
  <pre><code>onSlide(e){
   if(/*Some condition*/){
      //how to move to next image here?
    }
  }
  </code></pre>
  
  <p>As mentioned in the comment, in the onSlide function, I want to move to next image based on some condition. How to move to next image in the if condition there?</p>
  
  <p>I referenced <a href="https://ng-bootstrap.github.io/#/components/carousel/api#NgbCarousel" rel="nofollow noreferrer">official documentation</a> by the ng-bootstarap. They have mentioned next() method there. But I am sure how to use that one. Any help will be much appreciated.</p>