How to use Bootstrap 5 JS in an Angular 11 component TS

user_9159340 0
Viewed 5039

I'm working on a project that uses Angular 11, we want to use Bootstrap 5 native JS, without third parties like ng-bootstrap, MDB, or ngx-bootstrap (We are not using jQuery as well). I know using JS libraries on TS is not ideal.

The problem is how to import Bootstrap JS and use its objects and methods in Angular's TS components.

Initially I thought installing the following packages would be enough:

npm i bootstrap@next
npm i @types/bootstrap

Both have been imported in the package.json and are available in node_modules. I've also imported "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.js" ] inside of angular.json, but I still cannot use them.

For example, if I do:

import { Carousel } from 'bootstrap';
...
carousel: Carousel | any;
...
this.carousel = document.getElementById('video-carousel')
this.carousel.interval = false;

Where 'bootstrap' is '@types/Bootstrap'. The carousel shouldn't cycle automatically, but it does. This happens with every other Bootstrap type.

bootstrap-5 twitter-bootstrap npm angular typescript
4 Answers

I think that you are using the carousel element in a bit wrong way. In order to use the carousel methods you should initialize a Carousel element with the appropriate config.

Instead selecting the native HTML element that represents the carousel you should create new Carousel(elementRef, config) and make any further changes by referring the class.

<div #carouselExampleSlidesOnly class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item red active">
      Text 1
    </div>
    <div class="carousel-item orange">
      Text 2
    </div>
    <div class="carousel-item blue">
      Text 3
    </div>
  </div>
</div>


...
 @ViewChild("carouselExampleSlidesOnly") carouselElement: ElementRef<
    HTMLElement
  >;
  carouselRef: Carousel;
...
  ngAfterViewInit() {
    this.carouselRef = new Carousel(this.carouselElement.nativeElement, {
      slide: false
    });
  }
...

This will create a carousel element that doesn't auto slide.

Here is a working Stackblitz example, where you can pause and play the carousel, keep in mind that beside importing the node_modules/bootstrap/dist/js/bootstrap.js in the scripts inside your angular.json you should also import "./node_modules/bootstrap/dist/css/bootstrap.css" in the styles.

user_71775580

According to the official bootstrap documentation, Carousel requires bootstrap's own Javascript plugins and Popper.js. In order for your carousel to work, be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper and that should do the trick. I was having the same issue with the bootstrap dropdown-toggle. It didn't work. Instead of importing "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.js" ] in angular.json. I imported "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" ] (which includes popper) and it worked like a charm.

user_86271690

Even if you will add node_modules/bootstrap/dist/js/bootstrap.js in your angular.json, your component might not understand that. Batter to add only what is required in your component to support tree shaking.

In your component where you want to use bootstrap functionality ( like modal ), import the specified bootstrap js file like below

import Bootstrap from 'bootstrap/dist/js/bootstrap';

Define a variable for bootstrap modal and @ViewChild like below

modalDirect: Bootstrap.Modal;
@ViewChild('demoModal') input;
Now create a method to open the bootstrap5 modal on click of a button
open(element): void {
  this.modalDirect = new Bootstrap.Modal(element, {});
}

now it should work

here you can get an example

https://github.com/aniruddhadas9/bootstrap5-angular10-without-jQuery/blob/master/src/app/components/home/home.component.ts

user_5376470

I was having the same issue and then I realized I had imported the scripts (and styles) in the wrong place. Be sure that you're importing inside

"architect": { 
  "build": {
    "options": {
       ...
     "styles": [],
     "scripts": []
     }
  }
}

I was actually importing mine inside "test": { .... }.

user_9054170
Related