Bootstrap collapse not working in Angular 9

Question

I am having trouble with my navbar not opening up the menu when I change my screen size.

Here are the versions of the dependencies that I am running:

"@angular/animations": "~9.0.6",
    "@angular/common": "~9.0.6",
    "@angular/compiler": "~9.0.6",
    "@angular/core": "~9.0.6",
    "@angular/forms": "~9.0.6",
    "@angular/platform-browser": "~9.0.6",
    "@angular/platform-browser-dynamic": "~9.0.6",
    "@angular/router": "~9.0.6",
    "bootstrap": "^5.1.1",
    "jquery": "3.4.1",
    "popper.js": "^1.16.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"

---

I have tried downgrading my jquery as suggested in another post but that didn't do anything.

Here is my HTML:

---

<nav class="navbar navbar-expand-lg navbar-dark bg-primary my-navbar fixed-top">
    <div class="container-fluid">
      <!--<a class="navbar-brand" href="#">Navbar</a> -->
      <img
    width="200"
    alt="logo"
    src= "assets/imgs/logo.png"
  />
  <button class="navbar-toggler" type="button" data-toggle="collapse"  data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
  
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav me-auto">
          <li class="nav-item">
            <a class="nav-link" routerLink="/userprofile" routerLinkActive="active">Home
              <!--<span class="visually-hidden">(current)</span>-->
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/generalmachining" routerLinkActive="active" >General Machining</a>
            <span class="visually-hidden">(current)</span>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/toolreorder" routerLinkActive="active">Tool Re-Ordering</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/setupsheets" routerLinkActive="active">Setup Sheets</a>
          </li>     
          <li class="nav-item">
            <a class="nav-link" routerLink="" >Log Out</a>
          </li>     
        </ul>
        <form class="d-flex">
          <input class="form-control me-sm-2" type="text" placeholder="Search">
          <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>

---

In the HTML I am calling the ID, I have the "#" in the data target and it matches the ID in the dev.

Here are my style and script paths:

---

"styles": [
            "src/styles.css",
            "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": [
             "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "src/custom.js"
           ]

---

I feel like I am dealing with a missing package or the wrong version of a package at this point, but I just can't put my finger on it.

Thanks for any help.

Answer 1

Try reading the Bootstrap v5 docs. The data attribute names have changed and are now namespaced with a bs- prefix. Make the following change and it should work:

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse"  data-bs-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>