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\'

Answer 1

While Seth's solution works absolutely fine as it is, I modified the collapsing logic. Instead of using the click event, I subscribe to the router events to collapse the menu only after successful navigation.

export class NavMenuComponent implements OnDestroy {
    public isCollapsed: boolean = true;
    private subscription: Subscription;

    constructor(private router: Router) {  
        this.subscription = this.router.events.subscribe(s => {
            if (s instanceof NavigationEnd) {
                this.isCollapsed = true;
            }
        });
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}

Answer 2

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 3

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.

Answer 4

This is a limitation of navbar (https://github.com/valor-software/ngx-bootstrap/issues/540). So you need to manipulate the DOM element.

<div class="navbar-header page-scroll">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <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" routerLink="/">
        <img src="assets/images/logo.png">
    </a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav navbar-right" >
        <li class="hidden">
            <a></a>
        </li>
        <li><a routerLink="/" (click)="onMenuClick()">Home</a></li>
        <li><a routerLink="/about" (click)="onMenuClick()">About</a></li> 
    </ul>
</div>

And on .ts file your minimal code shoul be:

import { Component, ElementRef, Renderer } from '@angular/core';
export class HeaderComponent {
    constructor(private el: ElementRef, private renderer: Renderer) {
    }
    onMenuClick() {
        //this.el.nativeElement.querySelector('.navbar-ex1-collapse')  get the DOM
        //this.renderer.setElementClass('DOM-Element', 'css-class-you-want-to-add', false) if 3rd value is true 
        //it will add the css class. 'in' class is responsible for showing the menu, remove it.
        this.renderer.setElementClass(this.el.nativeElement.querySelector('.navbar-ex1-collapse'), 'in', false);        
    }
}