i'm trying to setup a basic button in my angular application where it shows a dropdown menu with different options whenever i click on it.
i copy pasted some boostrap template code and changed some of the classes to match the look of my application, however, when i click on the button it does not show the dropdown menu.
here's the code for the button in question
<div class="list-group list-group-flush ">
<div class="Dropdown">
<a routerLink="/homepage/facture" role="button" class="list-group-item list-group-item-action element-red dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only" id="dropdownMenuLink"></span>Gestion Facture</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>
these are my styles and scripts in the angular.json file
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
]
Bootstrap v4 require popper.js before bootstrap.js
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/popper.js/dist/umd/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
]
For some reason this dropdown menu is not showing the listed elements when hovered. Using bootstrap.
Am I missing something here? Maybe it's something simple but I just cannot see it.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Services -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Rewiring</a>
<a class="dropdown-item" href="#">Light Fixes</a>
<a class="dropdown-item" href="#">Showers</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Rewiring</a>
<a class="dropdown-item" href="#">Light Fixes</a>
<a class="dropdown-item" href="#">Showers</a>
</div>
</li>
In Bootstrap, dropdown runs by default on mouse click, if you want to show dropdown on mouse hover then you have to use css or js
I have used css
.dropdown:hover ul.dropdown-menu{ display: block; }
.dropdown:hover ul.dropdown-menu{ display: block; }
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Services
</button>
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Rewiring</a></li>
<li><a class="dropdown-item" href="#">Light Fixes</a></li>
<li><a class="dropdown-item" href="#">Showers</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Rewiring</a></li>
<li><a class="dropdown-item" href="#">Light Fixes</a></li>
<li><a class="dropdown-item" href="#">Showers</a></li>
</ul>
</div>
More things to talk about here:
Opening dropdown in BS is done by Popper.js (which is not part of bootstrap.min.js). So in order to make dropdown working, you need to load Bootstrap JS via bundle, where Popper.js is included
https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js
Since you are using BS5, you need to change data-toggle="dropdown" to data-bs-toggle="dropdown". That is new markup from version 5 onwards.
As mentioned in another answer, opening dropdown on click (and not hover) is core part of BS philosophy (unfortunately). So in case you want to open submenu on hover, additional CSS has to be added.
Also be careful with the markup. It would be more clean to use the structure recommended by BS for the navigation (using <ul>, <li>, etc.)
change <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>
to
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"> Dropdown button </button>
Change it to a button then it shoud work!!
I have found the solution:
This was the line causing trouble.
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>
I simply just added the following via Bootstrap:
aria-haspopup="true" aria-expanded="false"
I have an angular project without JQuery library. I want to use mdbootstrap dropdown for angular.
I used codes in page:
https://mdbootstrap.com/docs/angular/components/dropdowns/
I copied and paste its html code like this:
<div class="btn-group" mdbDropdown>
<button mdbDropdownToggle type="button" mdbBtn color="primary" class="dropdown-toggle waves-light"
mdbWavesEffect>
Basic dropdown
</button>
<div class="dropdown-menu dropdown-primary">
<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 class="divider dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
but the when I click in button, the menu is not shown.
Please check that you have added a proper jQuery CDN it may also caused by that if not please check this site in details https://mdbootstrap.com/docs/angular/components/demo/
This question already has answers here:
Bootstrap 4 popper is undefined
(2 answers)
Closed 3 years ago.
I'm creating a static website with HTML, but the CSS framework was built for me via a free theme builder. Now it's time for me to implement the framework successfully. I'm using Bootstrap Builder with their documentation to form my CSS, and from there adding additional content I need. I'm trying to add a dropdown in my Navbar, but for some reason the example they give me isn't working, but their demo/example does. I've copied their code line-for-line and haven't been able to get the example to even work. The sample code I share below is for a button dropdown, the only difference is using the btn class, but the code otherwise is exactly the same for a Navbar dropdown.
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#dropdownMenuLink" 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>
I expect that when I click on the dropdown, the items listed would display in a ... well... dropdown.
Expected results:
Untoggled/Not Clicked and
Toggled/Clicked, without the green square around it obviously.
Twitter bootstrap uses javascript for few components. In the case of dropdowns it uses popper.js so if you want to make the dropdown work you will need to add popperjs script. It is documented here.
https://getbootstrap.com/docs/4.0/getting-started/introduction/#js
also all components which are JS dependent are listed in this link.
At First Please Check your CDN order Whether you added the CDNS Appropiately or not
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="dropdown">
<a class="btn btn-secondary 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>
If Everything okay just remove the link reference from
<a class="btn btn-secondary dropdown-toggle" href="#" role="button"
id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">Dropdown link</a>
It will work fine.Hope It helps you
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:
And when I hace installed popper I've got this output:
What am I doing wrong?
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
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
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">
......................
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"
]
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:
npm install --save #ng-bootstrap/ng-bootstrap
Once installed you need to import our main module.
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>
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()
],
...
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"
]
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"'
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()
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"
]
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>
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>
What worked for was to
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"
]
Add this to the header tag of the index.html
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>