bootstrap dropdown not working when created an instance of Modal object in bootstrap in angular project

Question

Bootstrap dropdown suddenly not working after creating instance of any Modal, Popover etc that we had in node modules. What I was trying to do is to make use of the show method inside the Modal class to open the bootstrap modal.

I am using bootstrap 4.6 with angular 12

DropDown code ` 3

<div class="dropdown-menu notification-menu-container p-0 m-0">
    <div class="dropdown-body d-flex flex-column justify-content-between align-items-stretch">
        <div class="notification">
            <div class="card m-3">
                <div class="card-body">
                  This is some text within a card body.
                </div>
              </div>
        </div>
        <div class="notification">
            <div class="card m-3">
                <div class="card-body">
                  This is some text within a card body.
                </div>
              </div>
        </div>
        <div class="notification">
            <div class="card m-3">
                <div class="card-body">
                  This is some text within a card body.
                </div>
              </div>
        </div>
        <div class="notification">
            <div class="card m-3">
                <div class="card-body">
                  This is some text within a card body.
                </div>
              </div>
        </div>
        <div class="notification">
            <div class="card m-3">
                <div class="card-body">
                  This is some text within a card body.
                </div>
              </div>
        </div>
        <div class="notification-footer mt-3 w-100 bg-white align-self-center text-center">
            <a class="nav-link h6 text-info " routerLink="/notification"><u>View all Notifications</u></a>
        </div>
    </div>
</div>

`

Code for the Modal

<div class="notification-container">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        Launch demo modal
      </button>
      
      <!-- Modal -->
      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" #notificationModal>
        <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">
              ...
            </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>

Code that created an instance of bootstrap

`import { Component, OnInit, ViewChild } from '@angular/core';
import { Modal } from 'bootstrap';

@Component({
  selector: 'app-notification-home',
  templateUrl: './notification-home.component.html',
  styleUrls: ['./notification-home.component.scss']
})
export class NotificationHomeComponent implements OnInit {
  @ViewChild('notificationModal') content: any;
  //modalInstance: Bootstrap.Modal;
  constructor() { }

  ngOnInit(): void {
  }

  public open = ():void => {
    debugger
    this.content.open();
    //let xx = new Bootstrap.Popover(null, null)
    let xx = new Modal(document.getElementById("exampleModal"), {});
    // new Modal(document.getElementById("exampleModal"), 
    //  {
    //   backdrop: "static",
    //   keyboard: true
    //  });
    // this.modalInstance.show();
  }

}`

angular.json

"assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/popper.js/dist/umd/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

Is the approach is the right approach to open a modal from a component ? Once I removed

let xx = new Modal(document.getElementById("exampleModal"), {});

everything will works a normal, including the dropdowns.

Answer 1

I had a similar problem. Importing straight from 'bootstrap' causes the dropdown listeners to disappear.

Fixed it by using deeper import: import Modal from 'bootstrap/js/dist/modal';

Same could be used for Popovers I guess: import Popover from 'bootstrap/js/dist/popover';

Goes to category: I dont know why but it works.