Angular Bootstrap dropdowns

Question

I am looking to implement a bootstrap dropdown in Angular.

I have added the bootstrap dependency, and the dropdowns appear but nothing happens when I click them.

  <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuSex" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Sex
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuSex">
          <a class="dropdown-item" href="#">Female</a>                
          <a class="dropdown-item" href="#">Male</a>                
      </div>
  </div>

What have I missed? Stackblitz here.

Answer 1

In your stackblitz you use Bootstrap v5, but your code looks like for v4.

v5 version dropdown example from docs (https://getbootstrap.com/docs/5.3/components/dropdowns/#overview) uses data-bs-toggle attributte:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>