Is there a way to build the mobile nav bar in ng2-bootstrap?

Question

I've been implementing ng2-bootstrap and Angular2.

I cannot figure out how to make the mobile navbar open / close.

Is this something that just isn't supported yet? Or am I missing something?

Update, html:

<nav class="navbar navbar-default">     <div class="container-fluid">      <div class="navbar-header">         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">             <span class="sr-only">Toggle navigation</span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>         </button>         <a class="navbar-brand" href="#">             <img src="/logo.png" />         </a>     </div>      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">         <ul class="nav navbar-nav">             <li router-active>                 <a [routerLink]=" ['Index'] ">Summary<span class="sr-only">(current)</span></a>             </li>             <li router-active>                 <a [routerLink]=" ['Portfolio'] ">Portfolio<span class="sr-only">(current)</span></a>             </li>             <li router-active>                 <a [routerLink]=" ['About'] ">About<span class="sr-only">(current)</span></a>             </li>         </ul>         <form class="navbar-form navbar-left" role="search">             <div class="form-group">                 <input type="text" class="form-control" placeholder="Search">             </div>             <button type="submit" class="btn btn-default">Submit</button>         </form>         <ul class="nav navbar-nav navbar-right">             <li dropdown keyboardNav="true">                 <a href class="dropdown-toggle" role="button" aria-expanded="false" dropdownToggle>                     <span class="glyphicon glyphicon-user" aria-hidden="true"></span>                     Andrew Duncan                      <span class="caret"></span>                 </a>                 <ul class="dropdown-menu" role="menu">                     <li role="menuitem"><a class="dropdown-item" href="#">Account Settings</a></li>                     <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>                     <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>                     <li class="divider dropdown-divider"></li>                     <li role="menuitem"><a class="dropdown-item" href="#">Logout</a></li>                 </ul>             </li>          </ul>     </div> </div> 

Typescript:

/*  * 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: () => require('es6-promise!./about')('About') },   { path: '/portfolio', name: 'Portfolio', loader: () => 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  */ 

Answer 1

You need to include and use the collapse directive

first you import the directive
import { CollapseDirective } from 'ng2-bootstrap'

Include it in your components directives
@Component({ directives: [CollapseDirective] })

Edit: As pointed out by Akkusativobjekt in the comments, Directives (in the current stable version of angular 2) are no longer placed in the @Component attribute.
They are included in the NgModule attribute.

@NgModule({ declarations: [CollapseDirective] })

then in your controller create a variable to keep track of whether or not it's collapsed
export class MyController { public isCollapsed: boolean = true; }

and in your template the line that looks like this
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" >
you'll want to toggle the variable
<button type="button" class="navbar-toggle collapsed" (click)="isCollapsed = !isCollapsed" >

And also in your template you'll want to change the line that says
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> to include the directive
<div id="navbar" class="navbar-collapse collapse" [collapse]="isCollapsed">

Documentation for ng2-bootstrap collapse
Example of using the collapse directive in html
Documentation for NgModule

Answer 2

I was able to do this using straight bootstrap4/jquery within my angular2 project by adding the same data-toggle and data-target attributes to the collapsible target div:

<nav class="navbar navbar navbar-dark bg-inverse navbar-sticky-top clearfix">   <div class="clearfix">     <a class="navbar-brand" href="#">MCR</a>     <button class="navbar-toggler hidden-sm-up float-xs-right" type="button" data-toggle="collapse"         data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false"         aria-label="Toggle navigation">     </button>   </div>   <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2" data-toggle="collapse" data-target="#exCollapsingNavbar2">   <ul class="nav navbar-nav">     <li class="nav-item">       <a routerLink="/home" routerLinkActive="active" class="nav-link" href="#">Home</a>     </li>     <li class="nav-item">       <a routerLink="/collection" routerLinkActive="active" class="nav-link" href="#">Collection</a>     </li>   </ul> </div> 

I hope this might help someone as I struggled with this. Thanks to all above for putting me on the right track.