CODEWITHSUNDEEP
angularbootstrap-4
Laura
Laura

Reputation: 45

Bootstrap dropdown not working in Angular

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

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 !

Upvotes: 1

Views: 1701

Answers (1)

Yusuf BESTAS
Yusuf BESTAS

Reputation: 194

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.

Upvotes: 3

Related Questions