title: How to control Ngb bootstrap carousel slide by button in Angular
body: <p>I have a scenario like this:</p>
  <ul>
  <li>Display Ngb Bootstrap carousel and control the slide images by two buttons: Previous and Next.</li>
  <li>When Previous button was clicked then show previous slide image and Next button was clicked then show next slide image.</li>
  <li>Unfortunately, my code doesn't work. Someone can help me. Below are my code:</li>
  </ul>
  <ol>
  <li>HTML code:</li>
  </ol>
  <pre><code>&lt;div class=&quot;wrapper-md&quot;&gt;
      &lt;div class=&quot;modal-header&quot;&gt;
          &lt;h5 class=&quot;modal-title&quot;&gt;TITLE HERE&lt;/h5&gt;
          &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot; (click)=&quot;modal.dismiss('Cross click')&quot;&gt;
              &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;modal-body&quot;&gt;
          &lt;ngb-carousel #carousel *ngIf=&quot;images&quot; [showNavigationArrows]=&quot;false&quot; [showNavigationIndicators]=&quot;false&quot;  [keyboard]=&quot;false&quot;&gt;
              &lt;ng-template ngbSlide *ngFor=&quot;let image of images; index as i&quot;&gt;
                  &lt;div class=&quot;picsum-img-wrapper&quot;&gt;
                      &lt;img [src]=&quot;image&quot; alt=&quot;Guide image&quot;&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;carousel-caption&quot;&gt;
                      &lt;h4&gt;Slide {{i}}&lt;/h4&gt;
                  &lt;/div&gt;
              &lt;/ng-template&gt;
          &lt;/ngb-carousel&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row justify-content-center&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-primary m-r&quot; *ngIf=&quot;!isNext&quot; (click)=&quot;skip()&quot;&gt;Skip&lt;/button&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-info m-r&quot; *ngIf=&quot;isNext&quot; (click)=&quot;previousStep()&quot;&gt;Previous&lt;/button&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-success&quot; (click)=&quot;nextStep()&quot;&gt;Next&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <ol start="2">
  <li>TypeScript code:</li>
  </ol>
  <pre><code>    images = [62, 83, 466, 965, 982, 1043, 738].map((n) =&gt; `https://picsum.photos/id/${n}/900/500`);
  
      @ViewChild('carousel', {static: true}) carousel: NgbCarousel;
  
      isPrevious: boolean = false;
      isNext: boolean = false;
  
      constructor(public modal: NgbActiveModal){
  
      }
  
      skip()
      {
          this.modal.close();
      }
  
      previousStep()
      {
          this.isPrevious = true;
          this.carousel.prev();
      }
  
      nextStep()
      {
          this.isNext = true;
          this.carousel.next();
  
      }
  </code></pre>
  <p>Any idea in my case.
  Thank in advance!</p>