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.

Does this answer your question? [Bootstrap 5 dropdown not working on angular 12](https://stackoverflow.com/questions/68952309/bootstrap-5-dropdown-not-working-on-angular-12) — Yong Shun, Oct 05 '21 at 01:10
Thank you for your response Yong. It ended up being the "-bs-" was missing in my "data-bs-toggle" and "data-bs-target". — M. Bal., Oct 05 '21 at 12:35

score 4 · Accepted Answer · answered Oct 05 '21 at 06:09

4

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>

answered Oct 05 '21 at 06:09

Arleigh Hix

9,990
1
14
31

Thank you, Arleigh! That did the trick. I missed that I was reading the v4 documentation, and when I followed your link it was right there. I appreciate your time. It looks like I am still too new to upvote, but this was the right answer for me. – M. Bal. Oct 05 '21 at 12:30

score 0 · Answer 2 · answered Oct 05 '21 at 05:21

Try installing bootstrap in your angular 9 app like below. This is only for css importing.

npm install bootstrap --save

Now you need to import bootstrap css directly in style.css file like this:

@import "~bootstrap/dist/css/bootstrap.css";

However, if you are required to install bootstrap with jquery and popper js then run the following commands like below:

npm install bootstrap --save
npm install jquery --save
npm install popper.js --save

After successfully run the above commands import it in angular.json file like this:

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

Thank Salahuddin for taking the time to respond. It ended up being the "-bs-" was missing in my "data-bs-toggle" and "data-bs-target". I did notice that I don't have the popper script, but I do have "popper.js": "^1.16.1" in the dependencies, so I am not sure if that will have an affect later. Again, thank you. — M. Bal., Oct 05 '21 at 12:39

score 0 · Answer 3 · answered Jan 20 '23 at 22:39

0

I had a similar issue whenever we upgraded our app to Angular 14. In my case I had to remove [isAnimated] attribute on my menu div tag. It probably had something to do with the packages that got upgraded/removed as part of the migration.

answered Jan 20 '23 at 22:39

Harini Vedala

281
3
6

Bootstrap collapse not working in Angular 9

3 Answers3