27

I'm developing a web application with Angular 5 and Bootstrap 4 and I'm having problems with the nav menu bar dropdowns. I'm following the documentation https://getbootstrap.com/docs/4.0/components/navs/ but I don't know why drop-down menu doesn't work!

<header>
    <div class = "row align-items-end nopadding">
        <div class = "col-md-3" style = "background-color: blanchedalmond"><app-logo></app-logo></div>
        <div class = "col-md-6">
            <ul class="nav justify-content-center">
                <li class="nav-item">
                    <a class="nav-link menu-item" href="#">Ligas</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link menu-item" href="#">Gráficas</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link menu-item" href="#">Artículos</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link menu-item dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Clasificaciones</a>      
                    <div class=" dropdown dropdown-menu">
                        <a class="dropdown-item menu-item" href="#">Equipos</a>
                        <a class="dropdown-item menu-item" href="#">Jugadoras</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </li>                
            </ul>
        </div>
        <div class = "col-md-3 right-content">
            Right column
        </div>
    </div>
</header>

What am I doing wrong?

Edit I:

I have added jquery and popper through npm, update muy angular-cli.json and restart the server:

angular-cli.json:

enter image description here

And when I load the page I've got this error:

Error in the source mapping: request failed with status 404 
Resource URL: http://localhost:4200/ scripts.bundle.js 
Sourcemap URL: bootstrap.min.js.map

When I have installed jquery I've got this output:

enter image description here

And when I hace installed popper I've got this output:

enter image description here

What am I doing wrong?

Improve this question
2
  • It works for me. Have you been able to repro the issue in JSfiddle or the like? Commented Mar 1, 2018 at 17:49
  • It works if you don't use Angular 5, with Angular 5 it doesn't work. Have you tested the code with Angular 5 inside a header component, for example? Commented Mar 1, 2018 at 17:52

15 Answers 15

Reset to default
50

You have to make sure that popper.js is included and loaded in your Angular app because that is required for all things that pop up or drop down in Bootstrap 4.

Here's what the relevant part of your angular-cli.json should look like:

"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"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"
],

To install popper.js use this command:

npm install popper.js --save

Reference: https://www.npmjs.com/package/popper.js

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

15 Comments

I've included bootstrap in my angular-cli.json. Where is popper,js?
That should normally be loaded immediately before bootstrap.min.js Look at the angular-cli.json in this question: stackoverflow.com/q/48362985/8270343
npm install popper.js --save is what you need: npmjs.com/package/popper.js
Note: Ensure that jQuery's reference is before bootstrap.js.
In my case, <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> changing data-toggle to data-bs-toggle started working fine. Hope it helps.
|
18

I'm not allowed to add a comment to WebDevBooster's answer, so I posted a new one. The next declaration in angular.json (angular-cli.json) will be enough:

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

The propper.js has already been included in bootstrap.bundle.min.js: https://getbootstrap.com/docs/4.4/components/dropdowns/#overview

Improve this answer

4 Comments

bootstrap.bundle.min.js is a tricky one. I didn't realize that. Thanks.
This seems not work currently. Any ideas why?
This is good, but what if someone wants a lighter version of bootstrap
I have been struggling to get the dropdown for quite some time, and almost decided to look for alternatives, I have all the necessary dependencies popperjs, jquery, but still, it doesn't work until I set bootsrap.bundle.mi.js. This happens to be a robust way to fix the issue.
7

In my case the issue was that i wasn't using angular specific attributes. See : https://ng-bootstrap.github.io/#/components/dropdown/examples

ngbDropdown ngbDropdownToggle ngbDropdownMenu and ngbDropdownItem

I had to change

<li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>

to:

<li class="nav-item dropdown" ngbDropdown>
            <a class="nav-link dropdown-toggle" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" ngbDropdownToggle>
              Link
            </a>
            <ul class="dropdown-menu"  ngbDropdownMenu aria-labelledby="navbarScrollingDropdown">
              <li ngbDropdownItem><a class="dropdown-item" href="#">Action</a></li>
              <li ngbDropdownItem><a class="dropdown-item" href="#">Another action</a></li>
              <li ngbDropdownItem><hr class="dropdown-divider"></li>
              <li ngbDropdownItem><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
Improve this answer

3 Comments

This look like it's the most Angular way to do this.
becareful, this code is for bootstrap 5 not 4. data-bs-toggle is BS 5. data-toggle is BS 4.
Had the OPs issue but using ng-bootstrap and the above is the correct solution, no need to modify angular.json add any dependencies, Angular 18 + ng-bootstrap 17. Arguably not documented well on the ng-bootstrap side.
4

I faced the same problem and resolved it by :

  1. npm install bootstrap --save
  2. Added the below line in styles.css

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

  1. Added the below lines in the index.html

<!doctype html>
<html lang="en">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<head>
  <meta charset="utf-8">

......................

Improve this answer

Comments

3

make sure you have installed jquery in your root folder

if not then install using NPM ---> npm install jquery --save

Note: If you want to use bootstrap in your application, or if you already have in your project, make sure to include jQuery before including the bootstrap JavaScript file. Bootstrap’s JavaScript file requires jQuery

go to the angular.json file at the root of your Angular CLI project folder, and find the scripts: [ ] property, and include the path to jQuery as follows:

"scripts": [ "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.js"
       ]
Improve this answer

Comments

2

Instead of adding popper, jquery dependency in your scripts, try this instead you can install ng-bootstrap (look for documentation in https://ng-bootstrap.github.io). Advantage of using ng-bootstrap over adding scripts of bootstrap, jquery and popper is it will not bloatup your bundle size and for these reason angular community has created ng-bootstrap. Steps to install:

  1. npm install --save @ng-bootstrap/ng-bootstrap
  2. Once installed you need to import our main module.
Improve this answer

2 Comments

This is a problem if you are already using a different component library like primeng but also want to use bootstrap nav library.
I really had a lot of trouble making this dropdown work until i removed bootstrap with npm from my angular project and then reinstalled it via ng-bootstrap. The component's templates markup needed minor edits in order to translate some bootstrap classes into ng directives, then it worked perfectly.
2

Here is a quick way to fix this issue.

Don't need to install popper or jquery vis npm, simply paste below lines in your index.html file inside head tag

  <!-- BootStrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <!-- JQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <!-- Popper --> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <!-- BootStrap JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Full working code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Some Website</title>
  <base href="./"> 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- BootStrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <!-- JQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <!-- Popper --> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 <!-- BootStrap JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 

</head>
<body>
  <div class="dropdown show">
  <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
</body>
</html>

Improve this answer

Comments

1

Additional to app.module.ts, you need to import the module MDBBootstrapModule.forRoot() in the module where you are putting navbar code.

Example: ../custom.module.ts

import { MDBBootstrapModule } from 'angular-bootstrap-md';
...
@NgModule({
  imports: [
    CommonModule,
    MDBBootstrapModule.forRoot()
  ],
...
Improve this answer

Comments

1

As of 21/05/2021, bootstrap 5.0.1 version has been rolled out and that seemed to have caused the issue for me. I switched back to 4.6.0 and things were good again.

NOTE: If you are referencing below scripts & styles in your angular.json, you should be fine. bootstrap.bundle.min.js already has popper.js bundled with it.

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.scss"
 ],
 "scripts": [
   "node_modules/jquery/dist/jquery.min.js",
   "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
 ]
Improve this answer

Comments

1

I had the same problem, the fix for me was changing the data-toggle, in your case, from:

<a class="nav-link menu-item dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Clasificaciones</a>

To:

<a class="nav-link menu-item dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Clasificaciones</a>
Improve this answer

Comments

0

I was having the same problem but I manage to find the solution, if you have bootstrap on your project the simple solution is change

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>

to

<a class="dropdown-toggle" data-toggle="dropdown" href='target="_self"'>Page 1
        <span class="caret"></span></a>

in short change href="#" to href='target="_self"'

Improve this answer

Comments

0

Firstly install using command line : npm install --save @ng-bootstrap/ng-bootstrap

add this : "./node_modules/bootstrap/dist/css/bootstrap.min.css" in the angular.json file inside styles array

lastly,in the app.module.ts file import dropdown module import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; and then add the module in the "import" section as : BsDropdownModule.forRoot()

add the BsDropdownModule.forRoot() in the import section in app.module.ts

Improve this answer

Comments

0

UPDATE

popperjs version has been deprecated

You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1

Now add these below scripts in angular.json > projects..architect.build.options.scripts

"scripts": [
              "node_modules/@popperjs/core/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]
Improve this answer

1 Comment

that does not work when you use bs 4. it will still try to get the old version and fail to recognize the @popperjs/core version. @popperjs/core is only working with bs 5.
-2

What worked for was to

  1. Add this to my angular.json

"scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/popper.js/dist/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

  1. Add this to the header tag of the index.html

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

Improve this answer

2 Comments

This is a terrible solution. First you add the dependencies into your node_modules and include them in your angular.json and then you add popper and bootstrap using external links. This is complety useless and a terrible solution! Either do 1 or the other!
@MartijnHiemstra if you read my comment properly, you would have seen "What worked for me". While mine has repetition, NONE of the other solutions were helpful to me!
-2 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Myapp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <!-- JQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <!-- Popper --> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 <!-- BootStrap JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 
</head>
<body>
  <div class="dropdown show">
    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown link
    </a>
  
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
</body>
</html>

jax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

Improve this answer

2 Comments

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
This is a debugging question. Please don't post code that doesn't show what's wrong with the original code in the question. The correct answer is that popper is not installed, which is not at all clear from your answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.