title: Bootstrap dropdown not working in Angular
body: <p>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. </p>
  
  <p>the concerned part of html :</p>
  
  <pre><code>        &lt;li class="nav-item dropdown"&gt;
            &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
              Events
            &lt;/a&gt;
            &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
              &lt;a class="dropdown-item" href="#"&gt;Angular Connect&lt;/a&gt;
            &lt;/div&gt;
          &lt;/li&gt;
  </code></pre>
  
  <p>concerned part of angular.json</p>
  
  <pre><code>            "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"
              ]
  </code></pre>
  
  <ul>
  <li>I've already checked and all files are in the right directory</li>
  <li>I've added popper.js to test a solution but it doesn't change anything</li>
  </ul>
  
  <p><strong>WORKAROUND SOLUTION :</strong>
  Add link for js, jquery AND css in index.html : </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;NgFundamentals&lt;/title&gt;
    &lt;base href="/"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  &lt;body class="container"&gt;
    &lt;events-app&gt;&lt;/events-app&gt;
  
    &lt;script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However, this isn't perfect since it's not using the package manager. Just a temporary solution.</p>
  
  <p>I don't know if anything else is of interest.
  Thanks already !</p>