title: Bootstrap carousel not working after data is being updated in Angular 7
body: <p>I have a Bootstrap carousel in my Angular 7 application. I am updating the carousel data in a  fix interval of time. It works for the first time but once the HTTP service updates the slide array, the carousel stops sliding.</p>
  
  <p>This is the code in the component html file "home.component.html":-</p>
  
  <pre><code>&lt;ngb-carousel *ngIf="slides.length &gt; 0" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators"&gt;
    &lt;ng-template ngbSlide *ngFor="let slide of slides" [id]="slide.id"&gt;
  
      &lt;app-screen1 *ngIf="slide.type == 'screen1'" [slideData]="slide"&gt;&lt;/app-screen1&gt;
      &lt;app-screen2 *ngIf="slide.type == 'screen2'" [slideData]="slide"&gt;&lt;/app-screen2&gt;
  
    &lt;/ng-template&gt;
  &lt;/ngb-carousel&gt;
  </code></pre>
  
  <p>This is the component ts file "home.component.ts".:-</p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { NgbCarouselConfig, NgbCarousel } from '@ng-bootstrap/ng-bootstrap';
  import { ApiService } from 'src/app/services/api.service';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss'],
    providers: [NgbCarouselConfig]
  })
  export class HomeComponent implements OnInit {
    @ViewChild(NgbCarousel)
    private ngbCarousel: NgbCarousel;
  
    intervalId: any;
  
    showNavigationArrows = false;
    showNavigationIndicators = false;
  
    slides = [];
  
    constructor(
      protected config: NgbCarouselConfig,
      private apiService: ApiService
    ) {
      config.interval = 2000;
      config.wrap = false;
      config.keyboard = false;
      config.pauseOnHover = false;
    }
  
    ngOnInit() {
      this.refreshData();
      this.intervalId = setInterval(() =&gt; {
          this.refreshData();
      }, 10000);
    }
  
    refreshData() {
      this.apiService.getData().subscribe((result) =&gt; {
        this.slides = result;
        // this.ngbCarousel.pause();
        // this.ngbCarousel.
        // this.config.interval = 3000;
      },
      (error) =&gt; {
  
      });
    }
  
  }
  </code></pre>
  
  <p>Any help will be appreciated.
  Thanks in advance.</p>