'Bootstrap 5 navbar does expand but doesn't close on Angular project

I am using Angular 12 and Bootstrap 5 to create a SPA. I created a shared navbar component. When my navbar changes to the hamburger menu button, the navbar does collapse as intended. But when i try to close it, there is no reaction. Am i missing something?

<nav class="navbar fixed-top navbar-expand-md navbar-dark shadow">
  <div class="container-fluid">
    <a class="navbar-brand" routerLink="/someUrl">Foo</a>
    <button 
     class="navbar-toggler" 
     type="button" 
     data-bs-toggle="collapse" 
     data-bs-target="#navbarToggleContent"
     aria-controls="navbarToggleContent" 
     aria-expanded="false" 
     aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarToggleContent">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item p-2">
         Item 1
        </li>
        <li class="nav-item p-2">
         Item 2
        </li>
        <li class="nav-item p-2">
         Item 3
        </li>
      </ul>
    </div>
  </div>
</nav>
htmlangulartwitter-bootstrapbootstrap-5


Solution 1:[1]

This code is fine. I forget to add the popper.js entry to my angular.json file.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Harun Sevinc

Related Questions