Necesarry configuration for bootstrap dropdownlist?-CodePudding

I have an angular project in which I try to use the dropdown navbar from bootstrap. I have litteraly copied this from https://getbootstrap.com/docs/4.0/components/navbar/ and the dropdown doesn't work with me:

//also tried it within <head> tags and with all different proposals I found in other questions.
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

<nav >
  <a  href="#">Navbar</a>
  <button  type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span ></span>
  </button>
  <div  id="navbarNavDropdown">
    <ul >
      <li >
        <a  href="#">Home <span >(current)</span></a>
      </li>
      <li >
        <a  href="#">Features</a>
      </li>
      <li >
        <a  href="#">Pricing</a>
      </li>
      <li >
        <a  href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div  aria-labelledby="navbarDropdownMenuLink">
          <a  href="#">Action</a>
          <a  href="#">Another action</a>
          <a  href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

I cannot seem to figure out why. I have bootstrap 5.2.1, jquery 3.6.1 and I also added popper 1.16.1 and added it to my styles.css. This doesn't change anything. Although I don't even think this should be necessary. Also I tried adding direct imports in css or in the html following this article: Navbar drop-down menu not working with Angular and Bootstrap 4. It didn't help. I cannot find any other necessary requirements to make this work.

            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/@ng-select/ng-select/themes/default.theme.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"
            ]

relevant dependencies:

    "@ng-bootstrap/ng-bootstrap": "^13.1.0",
    "bootstrap": "^5.2.1",
    "jquery": "^3.6.1",
    "popper.js": "^1.16.1",

What configuration is required/necessary to make the bootstrap dropdownlist work?

CodePudding user response：

You have bootstrap v5, so you need to use navbar from that version, not v4

Bootstrap v5 also doesn't use jQuery, so you can load only bundle in your angular.json setup, try this:

"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

use v5 navbar

it should then look like the example in the snippet below:

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>



    
    <nav >
      <div >
        <a  href="#">Navbar</a>
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
        </button>
        <div  id="navbarSupportedContent">
          <ul >
            <li >
              <a  aria-current="page" href="#">Home</a>
            </li>
            <li >
              <a  href="#">Link</a>
            </li>
            <li >
              <a  href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown
              </a>
              <ul >
                <li><a  href="#">Action</a></li>
                <li><a  href="#">Another action</a></li>
                <li><hr ></li>
                <li><a  href="#">Something else here</a></li>
              </ul>
            </li>
            <li >
              <a >Disabled</a>
            </li>
          </ul>
          <form  role="search">
            <input  type="search" placeholder="Search" aria-label="Search">
            <button  type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>

Also, you should probably use either bootstrap, or ng-bootstrap