Collapse not working in ng-bootstrap and angular 4 app for navbar breadcrumb button

Question

I am using angular 4 and bootstrap 4 beta 2 and ng-bootstrap for my application and also using ng-bootstrap.

I have added the navbar from the bootstrap documentation example.

The code looks like this:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

I have also added bootstrap styles in angular-cli.json. That code looks like this:

 "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

The Breadcrumb button on the mobile view is not responding on its click. and when i tried to inspect the same: I got to know that "collapsed" class is not getting added to the button on click.

Answer 1

Using ng-bootstrap (or in my case ngx-boostrap) definitely simplified things as I did not have to worry about jQuery and popper. As the currently accepted answer mentions.

However this did not solve my problem outright as I missed important details. After you have ngx-bootstrap up and running, you can start by binding the collapse property of the navbar-collapse div to a variable in your component file:

<div [collapse]="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
  ...
</div>

That alone isn't enough, and you actually need to modify this variable yourself (this is the part I missed) by binding to the click event of your toggler button:

<button (click)="isCollapsed = !isCollapsed" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-main" aria-controls="navbar-main" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

(click)="isCollapsed = !isCollapsed" being the fundamental missing piece for me. This binds the onClick event of the button to your isCollapsed variable, toggling it when clicked, and thus setting the collapse property of your navbar appropriately.

Here is the jsfiddle I found the ultimately helped me figure out my mistake: jsFiddle external link

Answer 2

I have a solution now. Just using ng-bootstrap solves your issue.

Html file:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"  aria-expanded="false" aria-label="Toggle navigation" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="navbarTogglerDemo02">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02" [ngbCollapse]="isCollapsed">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Component ts file:

export class AppComponent {
  isCollapsed = false;
}

add bootstrap css file in angular-cli.json:

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

Add this in main module:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

imports: [
  NgbModule.forRoot()
]

This will work like a charm.

The main advantage of using ng-bootstrap is you can eliminate the dependencies of other js libraries like jquery and popper and you can also write your components for bootstrap.