[SOLVED] Bootstrap Dropdowns button not working with Angular 8 component

Issue

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

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

Answered By – Akber Iqbal

Answer Checked By – Mildred Charles (BugsFixing Admin)