Bootstrap's collapsible navbar doesn't work with Angular2

Question

I've not managed to get the collapsible navbar in Bootsrap 3 to work correctly with Angular2. On reducing the window width, the menu is correctly replaced by the burger button, but clicking it doesn’t display the drop-menu. The button activates (goes dark) but that's it. I'd like to know if there's a workaround other than perhaps using ng-bootstrap?

Example: Plunk

<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapseNav">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href='#'>Angular2 & Bootstrap</a>
    </div>
    <div class="collapse navbar-collapse" id="collapseNav">
        <ul class="nav navbar-nav">
            <li><a class="navbar-brand" href="#">Home</a></li>
            <li><a class="navbar-brand" href='#'>Item</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="https://angular.io/">Angular</a></li>
        </ul>
    </div>
</div>

Problem now solved - was missing jQuery and bootstrap.js in index.html. — user2637516, Jun 22 '16 at 10:21

HaveSpacesuit · Answer 1 · 2017-08-04T13:01:40.020

10

This is what eventually did it for me (using Anguar 2 and Bootstrap 4.0.0-alpha.6):

<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
    <button type="button" class="navbar-toggler navbar-toggler-right" (click)="isExpanded = !isExpanded" [attr.aria-expanded]="!isExpanded" aria-controls="navbarContent">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" [routerLink]="['/home']">Home</a>

    <div class="collapse navbar-collapse" id="navbarContent" [ngbCollapse]="!isExpanded">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item"><a class='nav-link' [routerLink]="['/page1']">Page 1</a></li>
            <li class="nav-item"><a class='nav-link' [routerLink]="['/page2']">Page 2</a></li>
        </ul>
        <ul class="navbar-nav navbar-right">
            <li><a (click)='signOut()' style='cursor: pointer;'><span class="glyphicon glyphicon-log-in"></span> Sign Out</a></li>
        </ul>
    </div>
</nav>

edited Aug 04 '17 at 13:01

answered Apr 06 '17 at 19:16

HaveSpacesuit

3,572
6
40
59

How does this expand/collapse? – JordanGS May 24 '17 at 20:00
If the screen width goes below a certain threshold, the menu items aren't shown on the bar anymore. Instead, you get a hamburger menu that lists the items when clicked. – HaveSpacesuit May 24 '17 at 20:03
oh, not what i was looking for then sadly :( I wanted to create a fixed left nav that when minimized would collapse to show the icons only and when expanded would show icons and text. – JordanGS May 24 '17 at 21:33
You could _probably_ use ng-class to accomplish that without too much hassle. – HaveSpacesuit May 24 '17 at 21:39

score 3 · Answer 2 · edited Jul 20 '16 at 09:22

3

user2637516,

It is preferred not to use jQuery with Angular2.

https://www.quora.com/What-are-the-reasons-for-avoiding-jQuery-in-AngularJS

"jQuery will also cause problems for other scenarios, like pre-rendering the Angular2 application on the server or in a web worker, because jQuery components are expecting to work with the physical DOM. Plus it weights your application down with additional dependencies that will cause the application to load more slowly for a user."

edited Jul 20 '16 at 09:22

piyushj

1,546
5
21
29

answered Jul 20 '16 at 08:01

Gerard van der Stelt

133
1
2
7

Is there an alternative to achieving a collapsible navbar similar to bootstraps? – Ben Winding Oct 18 '16 at 06:24
1

There are several initiatives, but one option is ng2-bootstrap. https://valor-software.com/ng2-bootstrap/#/ I have used this in one of my projects and it worked fairly easy. You could also checkout Angular's Material design. http://www.creativebloq.com/how-to/build-a-material-design-app-with-angular-2?utm_campaign=NG-Newsletter&utm_medium=email&utm_source=NG-Newsletter_170 – Gerard van der Stelt Oct 19 '16 at 07:02
Thanks, I've also found this module to be easy to work with http://www.primefaces.org/primeng/#/tabmenu – Ben Winding Oct 25 '16 at 01:04

score 2 · Answer 3 · answered Nov 17 '17 at 07:49

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);        
}

}

score 1 · Answer 4 · answered Sep 21 '16 at 20:34

I experienced the same problem, searched for issues in the navbar component but found no one. Eventually got the burger menu button to work by adding these two lines to my index.html file:

<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>

Jquery need to be listed first of these two. Also, your paths might be different than the paths listed in this code sample.

score 1 · Answer 5 · edited May 23 '17 at 11:33

1

ng2-bootsrap works very well, except that I can not activate the animation.

This post explains how to build the navbar toggle:

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

edited May 23 '17 at 11:33

Community

1
1

answered Oct 31 '16 at 07:13

chris08002

487
5
15

Bootstrap's collapsible navbar doesn't work with Angular2

5 Answers5