0

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.

This is the code in the component html file "home.component.html":-

<ngb-carousel *ngIf="slides.length > 0" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
  <ng-template ngbSlide *ngFor="let slide of slides" [id]="slide.id">

    <app-screen1 *ngIf="slide.type == 'screen1'" [slideData]="slide"></app-screen1>
    <app-screen2 *ngIf="slide.type == 'screen2'" [slideData]="slide"></app-screen2>

  </ng-template>
</ngb-carousel>

This is the component ts file "home.component.ts".:-

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(() => {
        this.refreshData();
    }, 10000);
  }

  refreshData() {
    this.apiService.getData().subscribe((result) => {
      this.slides = result;
      // this.ngbCarousel.pause();
      // this.ngbCarousel.
      // this.config.interval = 3000;
    },
    (error) => {

    });
  }

}

Any help will be appreciated. Thanks in advance.

2

1 Answer 1

0

this is a working demo

mocked the service call... but repeatedly calling the service with a simple counter, which you can replace with your own service logic...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.