title: bootstrap 4 in Angular 2 dropdown not working
body: <p>I have followed the following to install bootstrap 4 into my Angular 2 project: <a href="https://stackoverflow.com/questions/37649164/how-to-add-bootstrap-to-an-angular-cli-project">Accepted Answer, following the first 1,2,3 and 4 steps</a></p>
  
  <p>However when I add the following <code>HTML</code> to my header component:</p>
  
  <pre><code>&lt;nav class="navbar-dark bg-inverse"&gt;
  &lt;div class="container"&gt;
      &lt;a href="#" class="navbar-brand"&gt;&lt;/a&gt;
      &lt;ul class="nav navbar-nav float-xs-right"&gt;
          &lt;li class="nav-item dropdown"&gt;
              &lt;a href="#" class="nav-link dropdown-toggle" id="nav-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;SomeEmail@hotmail.com&lt;/a&gt;
              &lt;div class="dropdown-menu" aria-labelledby="nav-dropdown"&gt;
                  &lt;a href="#" class="dropdown-item"&gt;Sign Out&lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>As you can see its a dropdown basically, when I click on the dropdown the page refreshes, instead it doesn't display the 'sign out' option.</p>
  
  <p>This is my <code>angular-cli.json</code> styles section:</p>
  
  <pre><code>"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],    
  </code></pre>
  
  <p>And inside my Angular 2 module:</p>
  
  <pre><code>import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  </code></pre>
  
  <p>I then import NgbModule into the imports section.</p>
  
  <p>I've clearly missed something, can someone shed any light into what it maybe exactly?</p>