Bootstrap hamburger not working in Angular 6 project

Question

I have used bootstrap style in an Angular 6 project to design the sign up page and it is working fine. But after resizing the browser when I click on the hamburger icon the, it doesn't collapse and hence the icon under the hamburger menu doesn't appear.

Here is the styles tag in angular.json file:

"styles":   [
            "src/styles.css"
            ],

And this is styles.css file:

@import "~bootstrap/dist/css/bootstrap.min.css";
@import '~ngx-toastr/toastr.css';

scripts array in angular.json file:

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

Navbar HTML:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">

  <a class="navbar-brand" href="/">My Chat</a>

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

    <span class="navbar-toggler-icon"></span>

  </button>

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

    <ul class="navbar-nav">

      <li class="nav-item">

        <a class="nav-link pointer" (click)="goToSignUp()">Sign-Up</a>

      </li>

    </ul>

  </div>

</nav>

<div class="row p-0 m-0">

  <div class="col-sm"></div>

  <div class="col-sm p-5">

    <h2 class="form-signin-heading">Sign in to continue</h2>

    <label for="inputEmail" class="sr-only">Email address</label>

    <input type="email" id="inputEmail" class="form-control" [(ngModel)]="email" placeholder="Email address" required autofocus>

    <br>

    <label for="inputPassword" class="sr-only">Password</label>

    <input type="password" id="inputPassword" class="form-control" [(ngModel)]="password" placeholder="Password" (keydown.enter)="onKeydown()" required>

    <br>

    <button class="btn btn-lg btn-primary btn-block" type="button"  (click)="signInFunction()">Sign in</button>

  </div>

  <div class="col-sm"></div>

</div>

Not sure what I am missing.

Probably going to be easier to use ng-bootstrap - medium.com/@frypan/… — James P
Thanks James, but in my application the hamburger menu should only appear when the browser resizes, i.e for mobile or tablet screen. For a desktop view its working fine. — Dibash

Akshay Oswal Akshay Oswal · Accepted Answer · 2019-06-20T10:35:32

Try to do this->

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

after ng-bootstrap has completed installation
In app.module.ts-> add -> import { NgbModule} from ‘@ng-bootstrap/ng-bootstrap’; And put it under @NgModule, imports: [NgbModule.forRoot()]
Run your angular app again

Also please try to add "node_modules/bootstrap/dist/css/bootstrap.min.css" under styles in angular.json

And add script imports for jquery, popper and bootstrap available on Bootstrap documentation website inside your project's Index.Html between the HTML body.

Bootstrap hamburger not working in Angular 6 project

2 Answers