Bootstrap 5 with Angular 12 : bootstrap (navbar, dropdown) interactions are blocked after get/create bootstrap instances by JavaScript

Viewed 321

Everything (navbar, dropdown) works fine until I try to get/create bootstrap instances in the .ts files. When I insert the get/create instance js code I can't collapse the nav-menu after I expanded and the dropdown is not working either!

Here is the source code on stackblitz

If you are commenting out the following code part, everything works fine!

 var modal = new Modal('#updatePwaModal');
 modal.show();
1 Answers

I found the solution that is answered in another question where the dropdown is broken when a modal instance is created. In my case, the dropdown and also the navbar was broken!

Instead of the

import { Modal } from 'bootstrap';

needed

import { Modal } from 'bootstrap/js/dist/modal';
Related