title: Is there a way to build the mobile nav bar in ng2-bootstrap?
body: <p>I've been implementing ng2-bootstrap and Angular2.</p>
  
  <p>I cannot figure out how to make the mobile navbar open / close.</p>
  
  <p><strong>Is this something that just isn't supported yet?  Or am I missing something?</strong></p>
  
  <p>Update, html:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default"&gt;
      &lt;div class="container-fluid"&gt;
  
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;a class="navbar-brand" href="#"&gt;
              &lt;img src="/logo.png" /&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li router-active&gt;
                  &lt;a [routerLink]=" ['Index'] "&gt;Summary&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li router-active&gt;
                  &lt;a [routerLink]=" ['Portfolio'] "&gt;Portfolio&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li router-active&gt;
                  &lt;a [routerLink]=" ['About'] "&gt;About&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;form class="navbar-form navbar-left" role="search"&gt;
              &lt;div class="form-group"&gt;
                  &lt;input type="text" class="form-control" placeholder="Search"&gt;
              &lt;/div&gt;
              &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li dropdown keyboardNav="true"&gt;
                  &lt;a href class="dropdown-toggle" role="button" aria-expanded="false" dropdownToggle&gt;
                      &lt;span class="glyphicon glyphicon-user" aria-hidden="true"&gt;&lt;/span&gt;
                      Andrew Duncan 
                      &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;ul class="dropdown-menu" role="menu"&gt;
                      &lt;li role="menuitem"&gt;&lt;a class="dropdown-item" href="#"&gt;Account Settings&lt;/a&gt;&lt;/li&gt;
                      &lt;li role="menuitem"&gt;&lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                      &lt;li role="menuitem"&gt;&lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider dropdown-divider"&gt;&lt;/li&gt;
                      &lt;li role="menuitem"&gt;&lt;a class="dropdown-item" href="#"&gt;Logout&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
  
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Typescript:</p>
  
  <pre><code>/*
   * Angular 2 decorators and services
   */
  import { Component, ViewEncapsulation } from '@angular/core';
  import { RouteConfig, Router } from '@angular/router-deprecated';
  
  import { AppState } from './app.service';
  import { Home } from './home';
  import { RouterActive } from './router-active';
  import { BUTTON_DIRECTIVES, DROPDOWN_DIRECTIVES } from '../../node_modules/ng2-bootstrap';
  /*
   * App Component
   * Top Level Component
   */
  @Component({
    selector: 'app',
    pipes: [ ],
    providers: [ ],
    directives: [ 
      RouterActive, 
      BUTTON_DIRECTIVES,
      DROPDOWN_DIRECTIVES ],
    encapsulation: ViewEncapsulation.None,
    styles: [
      require('./app.css')
    ],
    template: require('./app.html')
  })
  @RouteConfig([
    { path: '/',      name: 'Index', component: Home, useAsDefault: true },
    { path: '/home',  name: 'Home',  component: Home },
    // Async load a component using Webpack's require with es6-promise-loader and webpack `require`
    { path: '/about', name: 'About', loader: () =&gt; require('es6-promise!./about')('About') },
    { path: '/portfolio', name: 'Portfolio', loader: () =&gt; require('es6-promise!./portfolio')('Portfolio') }
  ])
  export class App {
    angularclassLogo = 'assets/img/angularclass-avatar.png';
    loading = false;
    url = 'https://twitter.com/AngularClass';
  
    constructor(
      public appState: AppState) {
  
    }
  
    ngOnInit() {
      console.log('Initial App State', this.appState.state);
    }
  
  }
  
  /*
   * Please review the https://github.com/AngularClass/angular2-examples/ repo for
   * more angular app examples that you may copy/paste
   * (The examples may not be updated as quickly. Please open an issue on github for us to update it)
   * For help or questions please contact us at @AngularClass on twitter
   * or our chat on Slack at https://AngularClass.com/slack-join
   */
  </code></pre>