title: Bootstrap 4 Navbar doesnt collapse in Angular4
body: <p>I'm working with Bootstrap 4 and Ng-Bootstrap in an Angular 4 Project,</p>
  
  <p>i have linked the que bootstrap.css in my angular-cli.json this way</p>
  
  <pre><code> "styles": [
      "../node_modules/bootstrap/dist/css/bootstrap.css",
      "styles.css"
    ],
  </code></pre>
  
  <p>and imported the NgbModule in my app.module that looks like this</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      NgbModule.forRoot()
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>i made a Navbar copying the documentation from the bootstrap website and added the toggle component from ng-bootstrap (it works well) the code looks like this</p>
  
  <pre><code>    &lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
    &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-
  target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
  expanded="false" aria-label="Toggle navigation"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
  
    &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
      &lt;ul class="navbar-nav mr-auto"&gt;
        &lt;li class="nav-item active"&gt;
          &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;
  &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div ngbDropdown class="d-inline-block"&gt;
            &lt;div class="nav-link" id="dropdownBasic1" ngbDropdownToggle&gt;Toggle 
  dropdown&lt;/div&gt;
            &lt;div ngbDropdownMenu aria-labelledby="dropdownBasic1"&gt;
              &lt;button class="dropdown-item"&gt;Action - 1&lt;/button&gt;
              &lt;button class="dropdown-item"&gt;Another Action&lt;/button&gt;
              &lt;button class="dropdown-item"&gt;Something else is here&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;form class="form-inline my-2 my-lg-0"&gt;
        &lt;input class="form-control mr-sm-2" type="search" placeholder="Search" 
  aria-label="Search"&gt;
        &lt;button class="btn btn-outline-success my-2 my-sm-0" 
  type="submit"&gt;Search&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>the problem starts when i scale down the window and the toggle does its work, when i press the button for collapsing the navbar it doesn't work.</p>
  
  <p>i tried installing and linking the js files of jquery and popper and the bootstrap one, but it still doesn't work, the actual angular-cli.json looks like this</p>
  
  <pre><code>     "styles": [
          "../node_modules/bootstrap/dist/css/bootstrap.css",
          "styles.css"
        ],
        "scripts": [
          "../node_modules/popper.js/dist/umd/popper.min.js",
          "../node_modules/jquery/jquery.min.js",
          "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  
        ],
  </code></pre>
  
  <p>what am i doing wrong?</p>