Bootstrap carousel slide.bs.carousel or slid.bs.carousel event not firing with Angular

Question

I've checked everywhere with no luck. I'm trying to detect when the carousel changes to a new slide (weather automatically or by user click). I have tried many combinations with no luck. The event just does not fire at all. I've used the event handler .on to attach events in the typescript file but they do not fire. I've also tried the now deprecated .bind as well and again nothing happens. Using Angular 8.3 Bootstrap 4.4.1

Here is the HTML



        Projects
    
    
        
            
            
            
            
            
            
        
        

            
                
                    
                        
                            
                                
                                    
                                        
                                            
                                                
                                            
                                        
                                    
                                
                            
                            
                                
                                    {{ project.name }}
                                    Language: {{ project.language }}
                                    Created: {{ project.date }}
                                    {{ project.description }}
                                    {{ project.linkDescription }}
                                
                            
                        
                    

                
            

        
        
            
            Previous
        
        
            
            Next

And the typescript

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-project-portfolio',
  templateUrl: './project-portfolio.component.html',
  styleUrls: ['./project-portfolio.component.scss']
})
export class ProjectPortfolioComponent implements OnInit {

  projects = new Array();

  constructor() { }

  ngOnInit() {
    this.projects = [{....}];

  }

  ngAfterViewInit() {

    document.getElementById("project-carousel").children[0].classList.add("active");

    [].map.call(
      document.querySelectorAll('.left'),
      ((slider: HTMLElement) => {

        slider.addEventListener('mouseenter', e => {

          var x = window.scrollX;
          var y = window.scrollY;
          window.onscroll = function () { window.scrollTo(x, y); };

        });

        slider.addEventListener('mouseleave', e => {

          window.onscroll = function () { };

        });

        let scrollDirection;
        let scrollAmount = 0;

        slider.addEventListener('wheel', (e) => {

          scrollDirection = e.deltaY;

          if (scrollDirection < 0) {
            scrollAmount = slider.scrollWidth / 8;
            slider.scrollLeft -= scrollAmount;
          } else {
            scrollAmount = slider.scrollWidth / 8;
            slider.scrollLeft += scrollAmount;
          }

        });
      })
    )
  }

}



$('#carouselIndicators').on('slide.bs.carousel', function () {
  console.log("Slide!"); // This does not fire
})

$('#carouselIndicators').on('slid.bs.carousel', function () {
  console.log("Slid!"); // This does not fire
})

user_13949742 · Answer

There are a few different ways to do this, but the below works well for me:

First run the below command to add bootstrap carousel environment:

ng add ngx-bootstrap  --component carousel

then app.module.ts:

//import CarouselModule at the top and in imports of app.module.ts include CarouselModule
import { CarouselModule } from 'ngx-bootstrap/carousel';
//in imports of app.module.ts include this:
imports: [
    BrowserModule,
    CarouselModule.forRoot()
  ],

add the below in app.component.ts

import { Component } from '@angular/core';
import { CarouselConfig } from 'ngx-bootstrap/carousel';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [
    { provide: CarouselConfig, useValue: { interval: 1500, noPause: true, showIndicators: true } }
  ]
})
export class AppComponent {
  title = 'testfunctions';
  
}

lastly, app component.html file:


  
    
    
      First slide label
      Nulla vitae elit libero, a pharetra augue mollis interdum.
    
  
  
    
    
      Second slide label
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    
  
  
    
    
      Third slide label
      Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Bootstrap carousel slide.bs.carousel or slid.bs.carousel event not firing with Angular

1 Answers