Bootstrap 4 Navbar Doesnt Collapse in Angular4

Bootstrap 4 Navbar doesnt collapse in Angular4

To work with angular you need this fix

first define this in your class public navbarCollapsed = true;

then chnage your button

<button class="navbar-toggler" type="button" (click)="navbarCollapsed = !navbarCollapsed" [attr.aria-expanded]="!navbarCollapsed" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

also you need to add this to your collapsing div

<div class="collapse navbar-collapse" [ngbCollapse]="navbarCollapsed" id="navbarSupportedContent"> 

now you don't need jquery, popper or bootstrap.js

you can find more info about this issue here.

also check ng-bootstraps working demo page code link.

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

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.

Bootstrap navbar collapse isn't working with angular4.4.4

Run

npm install  bootstrap --save
npm install jquery --save

In your-project/.angular-cli.json

add the following lines:

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

Navbar collapse with Bootstrap doesn't work in Angular

Per my comment to your original post, the issue is that your data-target value does not match the actual id you've specified for your dropdown menu.

If you are targeting #navbarSupportedContent as in the below code:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

Then your .collapse wrapper must have the same id:

<div class="collapse navbar-collapse" id="navbarSupportedContent">

Where currently you are using navbarNav

Toggle button not working in bootstrap 4 and angular 7 app for navbar

The simple solution to this problem is to import the scripts for jquery, popper and bootstrap intot the index.html file of your application. Doing this will allow your navbar dropdown collapsed nav-links.

i did this and it works very well for me.
See sample below

<!doctype html><html lang="en">
<head>  <meta charset="utf-8">  <title>TestApp</title>  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="icon" type="image/x-icon" href="favicon.ico">  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">  </script>  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">  </script>  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">  </script></head>
<body>  <app-root></app-root></body>
</html>

Bootstrap collapse not working in Angular 9

Try reading the Bootstrap v5 docs. The data attribute names have changed and are now namespaced with a bs- prefix. Make the following change and it should work:

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse"  data-bs-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>

Bootstrap 4 collapse navbar with Angular 4

This stackblitz shows how you can implement the Bootstrap navbar with the ngbCollapse directive from ng-bootstrap, without using jQuery. The boolean flag isNavbarCollapsed is defined in the component class and its value is toggled by the button.

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  ...
  <button class="navbar-toggler" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed">
      <span class="navbar-toggler-icon"></span>
  </button>
  <div [ngbCollapse]="isNavbarCollapsed" class="navbar-collapse">
    ...
  </div>        
</nav>

NG-bootstrap 4 with Angular 8: Navbar works, but doesn't auto-close on click (inside or outside navbar)

I figured it out. We can add this to the routerlinks in order to set the isNavbarCollapsed variable to true:

(click)="isNavbarCollapsed = true"

Altogether it looks like this:

<div class="collapse navbar-collapse" [ngbCollapse]="isNavbarCollapsed" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" [routerLink]="['/dash/', someParam]" (click)="isNavbarCollapsed = true">Dashboard <span
              class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/archive" (click)="isNavbarCollapsed = true">Archive</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/help" (click)="isNavbarCollapsed = true">Help</a>
    </li>
  </ul>
</div>

Hope that helps someone else. This technique is currently (2019-06-18) not included in the ng-bootstrap documentation so it wasn't immediately apparent what method is the best practice for closing the ng-bootstrap navbar when it is in the responsive state (hamburger menu).

---

Related Topics