Angular + Bootstrap Navbar Issue

Question

I'm using Angular 4 and bootstrap 3.3.7. The issue I have is that although the navbar collapses into a "hamburger" as expected, the hamburger is unresponsive to user clicks. I found a non angular working example here

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h

but even when I replaced my nav element with that from the working example the copied navbar hamburger was unresponsive also.

Here's my index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <!-- index.html -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();   
    });
    </script>
</head>
<body>
  <app-root>Loading...</app-root>
</body>

Here's my html containing the copied navbar

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class='container main-container' >
    <router-outlet></router-outlet>
</div>

Thoughts?

I want the hamburger icon to be responsive, when I click it I'd like to see my other navigation items show/hide. Getting close with answer below from Angela Pan — Phil O
– Phil O, Commented Aug 17, 2017 at 20:35

Angela P · Accepted Answer · 2017-08-17 15:14:02Z

2

In Angular 4, the button should look something like this:

  <button class="navbar-toggler navbar-toggler-right" type="button" (click)="isCollapsed = !isCollapsed">
    <span class="navbar-toggler-icon"></span>
  </button>

Notice the (click) part is new syntax for events, different from Angular 1+.

And instead of <div class="collapse navbar-collapse" id="myNavbar">, try this: <div class="collapse navbar-collapse" [ngbCollapse]="isCollapsed" >

In the nav.component.ts file, declare a variable called "isCollapsed" and set to true by default.

Install ng-bootstrap if you haven't done so.

npm install --save @ng-bootstrap/ng-bootstrap

In your app.module.ts file, you will need to import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; and add NgbModule.forRoot() in the imports section under NgModule.

In short, Angular 4 is using this functionality for the hamburger button to work properly. https://ng-bootstrap.github.io/#/components/collapse/examples

answered Aug 17, 2017 at 15:14

Angela P

2,0292 gold badges16 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Phil O Over a year ago

I made all the suggested changes and it's almost there. The hamburger icon is different, it's not 3 horizontal bars and it is always present. I was hoping only to see it when it was needed. I'm much closer, thanks!

Phil O Over a year ago

BTW, I'm using bootstrap 3.3.7 not 4.

Phil O Over a year ago

You can see the results here djangularphil.herokuapp.com/records

Angela P Over a year ago

hi, the hamburger icon in my app only appears when the width gets small. And it is 3 horizontal bars. But I see that you solved your issues. Great!

Phil O Over a year ago

Solved mostly except for the look of the hamburger icon and when its visible. Are you using bootstrap 4?

|

Collectives™ on Stack Overflow

Angular + Bootstrap Navbar Issue

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related