Bootstrap carousel event handling in Angular 2 / 4 / 5

Question

I am wondering how to catch event slide.bs.carousel (bootstrap 3 carousel) in Angular 2 and pass it to child component?

It's pretty simple in jQuery and I suppose in ng-2 too, but I cant't find simple solution.

Answer 1

First of all, to follow the Angular way, you need to look at Angular Bootstrap wrappers. I vote for ngx-bootstrap! Add it to your Angular project as a dependency and then you could use the CarouselModule (the doc is here).

Instead of slide.bs.carousel native event you would use activeSlideChange Angular event or play with [(activeSlide)] model. This could be done for example via setter interruption:

public myInterval: number = 1500;
private _activeSlideIndex: number;

get activeSlideIndex(): number {
  return this._activeSlideIndex;
};

set activeSlideIndex(newIndex: number) {
  if(this._activeSlideIndex !== newIndex) {
    console.log('Active slider index would be changed!');
    // here's the place for your "slide.bs.carousel" logic
  }
  this._activeSlideIndex = newIndex;
};

Where the template is just:

<carousel [interval]="myInterval" [(activeSlide)]="activeSlideIndex">
  <slide *ngFor="let slide of slides">
    <img [src]="slide.image">
  </slide>
</carousel>