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.

Brownlee

Welcome to StackOverflow. Please add the code that demonstrates what you try to accomplish, what you tried and where you failed. – Whittling

so far this <div id="banner" class="carousel slide" data-ride="carousel" (slide.bs.carousel)="myFunc($event)"> does not fire slide.bs.carousel. – Brownlee

One option is to move to Angular 4 and use ng-bootstrap's Carousel component. – Combustible

@ConnorsFan which still has the slide.bs.carousel event (or should do) – Thatch

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>

Nowt

Answer 2

I would suggest the ng-bootstrap angular wrapper because that contains the builtin directives and API that will help to manage the carousel state,event,and configurations.

If you look at this link that will help you further.

for example

<ngb-carousel>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=4" alt="Random first slide">
    <div class="carousel-caption">
      <h3>10 seconds between slides...</h3>
      <p>This carousel uses customized default values.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=5"  alt="Random second slide">
    <div class="carousel-caption">
      <h3>No keyboard...</h3>
      <p>This carousel uses customized default values.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=6" alt="Random third slide">
    <div class="carousel-caption">
      <h3>And no wrap after last slide.</h3>
      <p>This carousel uses customized default values.</p>
    </div>
  </ng-template>
</ngb-carousel>

On your TypeScript File

import {Component} from '@angular/core';
import {NgbCarouselConfig} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-carousel-config',
  templateUrl: './carousel-config.html',
  providers: [NgbCarouselConfig] // add NgbCarouselConfig to the component providers
})
export class NgbdCarouselConfig {
  constructor(config: NgbCarouselConfig) {
    // customize default values of carousels used by this component tree
    config.interval = 10000;
    config.wrap = false;
    config.keyboard = false;
  }
}

and more API please refer this link . i hope it will help you

Ceporah

Answer 3

You can use native element from carousel to catch the slide.bs.carousel event.

In your carousel div tag put the reference #carousel.

  < div id="carousel"  #carousel class="carousel carousel-dark slide"   data-bs-ride="carousel" >

     < div class = "carousel-inner" >

          < div class= "carousel-item custom-carousel-item active" data-bs-interval="10000" >
             ...
          < /div>

     < /div>

  < /div>

In the ts file use viewChild and fromEvent to catch slide.bs.carousel event.

 @ViewChild('carousel', { static: true }) carousel: ElementRef;

 ngOnInit(): void {

     fromEvent(this.carousel.nativeElement, 'slide.bs.carousel').subscribe(( data : any)=> {

          // code of event

     });

 }

Confocal