Navbar drop-down menu not working with Angular and Bootstrap 4

html css angular bootstrap-4

60,192

Solution 1

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

Solution 2

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

Solution 3

I faced the same problem and resolved it by :

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

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

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">

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

Solution 4

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"
       ]

Solution 5

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>

View more solutions

60,192

Author by

José Carlos

Hi!!! I'm an analist and software developer. Right now, I'm working with python, node js, react js, javascript in projects like full stack developer or front-end developer or back-end developer. Maybe I have no the skills that you are looking for right now, but ... I can learn and adapt to several environments. Please, if you think that I can help you in your project, feel free to ask whatever you want about my CV or me.

Updated on July 09, 2022

Comments

José Carlos almost 2 years

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:

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: