Bootstrap Dropdowns button not working with Angular 8 component

Question

I am trying to show dropdown menu using bootstrap4.3 class but after selecting on menu nothing will happen I ma using angular 8 version.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Solution 1

Dropdown functionality in Bootstrap requires bootstrap.js & jquery.js; But we shouldn't use these in Angular; So we use a library dedicated for using Bootstrap with Angular & look up dropdown functionality there

relevant HTML:

    <div ngbDropdown class="d-inline-block">
        <button class="btn btn-outline-primary" id="dropdownMenuButton" ngbDropdownToggle>Dropdown button</button>
        <div ngbDropdownMenu aria-labelledby="dropdownMenuButton">
          <button ngbDropdownItem>Action</button>
          <button ngbDropdownItem>Another Action</button>
          <button ngbDropdownItem>Something else here</button>
        </div>
      </div>

complete working stackblitz here

Solution 2

Bootstrap dependencies are popper.js and jquery. Once you install bootstrap in your angular app, it will show you the dependencies, then install them and add them in your angular.json in scripts (see the below picture). The versions compatible are [email protected] (the dropdown issue fixed in this version) and [email protected]

dependency for dropdown is popper.js in bootstrap

So with the above order, now the dropdown will work. Even with latest versions(4.5.x) of bootstrap works. You do not have to use another third party library/package manager for that, if you do not prefer. Thanks. Please see the relevant markup below, taken from bootstrap.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Comments

[Binod Karunanayake]

We have to follow the exact order given above. Unless it'll not work. Thanks.