Bootstrap with Angular 5

JavaScript
, ,
1

How to use bootstrap modal with angular 5? I want this with purely bootstrap not ng-bootstrap. I have already installed bootstrap as npm, and design UI with bootstrap now I need modal in my website. I have tried demo code for modal from bootstrap official documentation but nor work. Can anyone help me out of this

2

Bootstrap Modal is part of their JavaScript library, which is DOM based and uses jQuery (even in v4). Using these pieces in component based frameworks like React, Angular, or Vue is tricky, since the way you render elements and handle/create actions can be handled very differently.

I’m not familiar with Angular, but you have the same basic 4 options:

  1. Find a library that implements the JavaScript portions of Bootstrap in vanilla in a way that works with your framework.
  2. Roll your own of the above.
  3. Find another modal only library that can work well with Angular.
  4. Roll your own of the above.
1 Like
3

Actually it worked for me out of the box using the data-* attribute API for the modal… so the BS script probably just listens to the whole document and it doesn’t matter if the markup was added dynamically or not.

As @mawburn pointed out there’s no “pure” bootstrap; and since there’s an angular implementation available, it would certainly be preferable to use that rather than including another couple of libraries just to make the modal work.

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.