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

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

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


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

Tags:

Html

Css

Bootstrap 4

Angular

Recent Posts