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

Question

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://getbootst

Answer 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()
  ],
...

Answer 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.

Answer 3

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

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

Answer 5

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

Answer 6

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