Bootstrap dropdown not working in Angular

Question

I'm trying to learn Angular using bootstrap, but I have a problem concerning bootstrap dropdown element. It doesn't work at all. I've read through all the bugfixes I could find on Stack Overflow but none fixed my issue.

the concerned part of html :

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Events
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Angular Connect</a>
          </div>
        </li>

concerned part of angular.json

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

I've already checked and all files are in the right directory
I've added popper.js to test a solution but it doesn't change anything

WORKAROUND SOLUTION : Add link for js, jquery AND css in index.html :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>NgFundamentals</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body class="container">
  <events-app></events-app>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

However, this isn't perfect since it's not using the package manager. Just a temporary solution.

I don't know if anything else is of interest. Thanks already !

Is only the dropdown not working or can you not use bootstrap styles at all? — user13258211
– user13258211, Commented Jun 10, 2020 at 7:53
The bootstrap styles are working. I've tried to add it in the index.html it doesn't seems to work (gonna edit my post above) — Laura
– Laura, Commented Jun 10, 2020 at 7:56
Since bootstrap styles worked i didn't think it was necessary but it worked ! thanks a lot ! (Can you post your solution as an answer so I can mark this subject as resolved ?) — Laura
– Laura, Commented Jun 10, 2020 at 8:34

Yusuf BESTAS · Accepted Answer · 2020-06-10 08:13:47Z

3

You said but i think your false directory.Must be like this

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   "scss/style.scss"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.slim.js"
],
enter code here

There must be two dot in front ot the node_modules. İf you wanna sure.Please click the file and drag drop index.html.You will see truth directory.

answered Jun 10, 2020 at 8:13

Yusuf BESTAS

3042 silver badges12 bronze badges

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

1 Comment

Laura Over a year ago

Thanks for your response ^^ I've tried it and it changes nothing :/.

Collectives™ on Stack Overflow

Bootstrap dropdown not working in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related