Bootstrap navbar dropdown problem on angular

Question

I'm having problems with the bootstrap navbar on Angular, I can't get the dropdown menu to load. The bootstrap scripts are linked in the angular.json file, I really can't figure out why. On an online editor the same code works fine. I attach the code.

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">
      <img src="../../../assets/images/logo.png" style="width: 100px;" alt="logo">
      </a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" aria-current="page" routerLink="/">
          <span class="material-icons md-home" title="home" aria-hidden="true"></span>
          Home
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" title="Prod"  routerLink="/art">
          <span class="material-icons md-archive" title="prodotti" aria-hidden="true"></span>
          Prod
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" title="Promo" routerLink="/promo">
          <span class="material-icons md-campaign" title="promozioni" aria-hidden="true"></span>
          Promo
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" title="Fidelity" routerLink="/fidelity">
          <span class="material-icons md-card_membership" title="Fidelity" aria-hidden="true"></span>
          Fidelity
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" title="Ord" routerLink="/ord">
          <span class="material-icons md-local_grocery_store" title="Ordini" aria-hidden="true"></span>
          Ord
          </a>
        </li>
        
      </ul>



      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        
      </form>

      <div class="btn-group" id="ul">
        <button type="button" class="btn btn-default dropdown-toggle thumbnail dduser" data-bs-toggle="dropdown" aria-expanded="false">
          <img class="img-circle" src="/assets/images/user.png" width="38" height="38">
        </button>

        <ul class="dropdown-menu">
          <li><a class="dropdown-item" routerLink="/login">Acc</a></li>
          <li><a class="dropdown-item" href="#">Reg</a></li>
          <li><a class="dropdown-item" href="#">Dis</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" *ngIf="BasicAuth.isLogged()" routerLink="/logout">Logout {{BasicAuth.loggedUser()}}</a></li>
          <li><a class="dropdown-item disabled" *ngIf="!BasicAuth.isLogged()"  href="#">Logout</a></li>
        </ul>
      </div>

    </div>
  </div>
</nav>

I tried to modify the code following the bootstrap one from their site. but nothing doesn't work anyway, i tried to upload my code on stackbitz and it works, but if i start it from my pc it doesn't work.

After attaching the script in angular.json you need to start it manually again. Only saving it won't work. — Suhail Akhtar
– Suhail Akhtar, Commented Dec 20, 2022 at 9:59
Yes I rebooted. I restarted the visual studio program, closed and reopened the terminal. I also restarted the PC but unfortunately nothing changed. It still does not work. — Thomas
– Thomas, Commented Dec 21, 2022 at 10:52

Fronin · Accepted Answer · 2022-12-24 17:13:32Z

0

Also had the same problem
Solved it by

uninstall jquery via npm npm uninstall jquery
1.1) in angular.json under scripts=[] -> delete the path to jquery
In index.html add
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> and also
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> Those 2 are from bootstrap official website
Then I installed popper with npm install popper.js --save

This is how it worked for me. Now I when I click on the dropdown button, the dropdown menu opens, but when I click on the button again then it doesn't close. So, if anybody knows why that happens, let me know. Thanks and I hope it helps

answered Dec 24, 2022 at 17:13

Fronin

275 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Diego N. Over a year ago

On production i'd never use CDN, but if this solution works you, you can always download the minified version and link it through angular.json file as script

Fronin Over a year ago

@DiegoN. The reasons why one should never use CDN - may it be because of this website maxlaumeister.com/articles/3-reasons-not-to-use-a-cdn Also what minified version do you mean specifically? That one from Bootstrap?

Diego N. Over a year ago

The one you used though jsdelivr, [email protected]/dist/js/bootstrap.bundle.min.js

Thomas Over a year ago

I fixed it by changing bootstrap version. I installed 5.0.0.

Collectives™ on Stack Overflow

Bootstrap navbar dropdown problem on angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related