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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" (click)="setToggler()" 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" [class.collapse]="isToggled">
    <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>

modify like above and add

in component.ts (after the class declaration)

public isToggled:boolean=false;

Also Add function setToggler()

    setToggler()
    {

    this.isToggled=!this.isToggled;

  }

and remember to add [class.collapse] to the div which includes "navbar-collapse" class like

[class.collapse]="isToggled"

Hope Someone gets help from it as it solved mine. Source: https://stackoverflow.com/a/53400477/13279910

Answer 2

I faced a similar plroblem. There is nothing complicated to do to make your angular project work. Just open index.html (main html file) and add js to it at the bottom of body:

Answer 3

The Javascript files are not loaded. Add the following somewhere in your HTML code (preferably in the header):

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

See https://getbootstrap.com/docs/5.1/getting-started/introduction/#js and https://getbootstrap.com/docs/5.1/getting-started/javascript/ for more information.

Answer 4

I have fixed using the below solution

component.html

<nav class="navbar navbar-expand-lg navbar-light bg-light shadow bg-body rounded">
<div class="container-fluid">
    <a class="navbar-brand" href="/">{{ applicationName }}</a>
    <button #collapseButton class="navbar-toggler" type="button" data-bs-toggle="collapse"
        data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
        aria-label="Toggle navigation" (click)="togglePanel(collapseButton,collapsePanel)">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div #collapsePanel class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <div class="navbar-nav me-auto mb-2 mb-lg-0"></div>
        <ul class="navbar-nav me-2">

            <li class="nav-item" *ngFor="let navItem of navMenuList">
                <a class="nav-link" [routerLink]="navItem.path">
                    <mat-icon>{{navItem.icon}}</mat-icon> {{navItem.name}}
                </a>
            </li>

        </ul>
    </div>
</div>

component.ts

togglePanel(collapseButton: HTMLElement, collapsePanel: HTMLElement) {
if (this.isCollapsed) {
  collapseButton.classList.add('collapsed');
  collapsePanel.classList.remove('show');
} else {
  collapsePanel.classList.add('show');
  collapseButton.classList.remove('collapsed');
}
this.isCollapsed = !this.isCollapsed

}

Answer 5

Working Navbar

ng-bootstrap

Getting Started Components {{ component }}

 <span class="github-buttons d-none d-lg-inline"> 
   <a class="github-button" 
      href="https://github.com/ng-bootstrap/ng-bootstrap" 
      target="_blank" 
      data-style="mega" 
      data-count-href="/ng-bootstrap/ng-bootstrap/stargazers" 
      data-count-api="/repos/ng-bootstrap/ng-bootstrap#stargazers_count" 
      data-count-aria-label="# stargazers on GitHub" 
      aria-label="Star ng-bootstrap/ng-bootstrap on GitHub">Star</a> 
   <a href="https://twitter.com/intent/tweet?button_hashtag=ngbootstrap" 
      class="twitter-hashtag-button" 
      data-size="large" 
      data-text="I&#39;m checking out ng-bootstrap, THE Angular UI framework for Bootstrap CSS" 
      data-url="https://ng-bootstrap.github.io" 
      data-show-count="true">Tweet #ngbootstrap</a> 
 </span> 

Answer 6

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 7

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.