Bootstrap 4 Navbar doesnt collapse in Angular4

Question

I\'m working with Bootstrap 4 and Ng-Bootstrap in an Angular 4 Project,

i have linked the que bootstrap.css in my angular-cli.json this way

 \"styles         


        

Answer 1

this works fine for me I installed npm i --save @ng-bootstrap/ng-bootstrap ng add @angular/localize

• app.module.ts

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

imports:[NgbModule]

NgbModule.forRoot() not working

• angular.json "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], "scripts": ["node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.js]`

Hope this helps, even just alittle bit

Answer 2

I had the same problem, I used normal bootstrap 4 rather then ng-bootstrap and this way I don't need to any module in app.module file as well. it works. Below is the script add into angular.json (angular v6) and bootstrap 4+:

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

For CSS I prefer to use Scss version so it goes like this.

"styles": [
              "src/styles.scss",
              "../node_modules/font-awesome/scss/font-awesome.scss"
            ],

and i import bootstrap into style.scss file

@import "~bootstrap/scss/bootstrap.scss";

Cheers! JK

Answer 3

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.

Answer 4

Look for the compiled classes, maybe you get the wrong version. I had a similar issue with the class col-sm-offset-#, the problem was that this classes doesn't exist in that version. Maybe could be the same issue

This is the route ..\node_modules\bootstrap\dist\js here we have two file bootstrap.js and bootstrap.min.js

find into bootstrap.js the nav classes. if you could not found it, look for another Bootstrap repository.

Good luck.