Bootstrap 5 in angular 10 without jQuery

Bootstrap 5 is now in alpha and they removed jQuery with it. The question is how to use it in angular application without any 3rd party libraries like ng-bootstrap, ngx-bootstrap etc.

What is required

— angular 8, 9, 10 application

— bootstrap 5 alpha

Code is available in GitHub https://github.com/aniruddhadas9/bootstrap5-angular10-without-jQuery

Step1:

Generate an angular project using ng command ng new appname` and then install the bootstrap 5 alpha by npm install — save bootstrap@next`

Step2:

Now add the `scss/css` to your angular.json file to include the bootstrap css classes to your app

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "src/styles.scss"
],

https://github.com/aniruddhadas9/bootstrap5-angular10-without-jQuery/blob/master/angular.json#L30:L33

That is all you need to setup your application. Now you can add the bootstrap js file in any angular component to use a bootstrap functionality. Here we will create a bootstrap modal window on click of a button.

Step 3: Implement bootstrap modal in angular component

In a component where you want to use bootstrap functionality (modal), import the 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, {});
}

The TypeScript class can be found at https://github.com/aniruddhadas9/bootstrap5-angular10-without-jQuery/blob/master/src/app/components/home/home.component.ts

Here is the html

<div class="home-component container">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary"
          (click)="open(demoModal)"
          data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>

  <!-- Modal -->
  <div #demoModal class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ... this is the model content
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>

The html file can be found https://github.com/aniruddhadas9/bootstrap5-angular10-without-jQuery/blob/master/src/app/components/home/home.component.html

Conclusion

It’s straightforward and simple. Bootstrap 4.5.x css class names are exist in bootstrap5 and there are few depreciation but easy to adapt . Not required any 3rd party library. This solution is not optimized but is a good start.