Build navbar for angular 4 app using bootstrap 4

Question

I have seen the documentation for ng-bootstrap. In that i have read this point:

Should I add bootstrap.js or bootstrap.min.js to my project? No, the goal of ng-bootstrap is to completely replace JavaScript implementation for components. Nor should you include other dependencies like jQuery or popper.js. It is not necessary and might interfere with ng-bootstrap code.

But now to implement the bootstrap topnav i have to include bootstrap 4 supporting javascript files. If i am doing that i am not following the words said in ng-bootstrap. Need suggestions.

As @Veromy say you don't need bootstrap, only css. You can see an implementation of navbar in github.com/ng-bootstrap/ng-bootstrap/issues/738. NOTE:If you want to import only css you can write "npm install bootstrap-css-only" or include in your html or downloaded and include in styles in the .angular-cli.json — Eliseo
– Eliseo, Commented Nov 9, 2017 at 15:03

Manu · Accepted Answer · 2017-11-09 14:44:50Z

2

After installing bootstrap via npm with $ npm install [email protected] you can simply add the library in your angular-cli.json like this:

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

And it should then work.

answered Nov 9, 2017 at 14:44

Manu

1,0751 gold badge15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adithya Sai Over a year ago

this seems working fine. i got the view of the top navbar by adding the css file and i have added bootstrap beta 2 using CLI. But now i have got another problem. In the mobile view the nav bar is not getting collapsed. on click of the breadcrumb button it is not showing them the menu. and when i tried to see that using developer tools i have realized that the "collapse" class is not getting added to the breadcrumb button. then i even tried to add bootstrap.min.js (just a wild try) even that did not work. I dont know why it is happening.

Adithya Sai Over a year ago

and in console its throwing me an error "Uncaught ReferenceError: $ is not defined"

Venomy · Accepted Answer · 2017-11-09 14:40:30Z

0

You don't have to import any javascript files in order to use ng-bootstrap.

Running npm install --save @ng-bootstrap/ng-bootstrap should be sufficient.

It is even possible to use bootstrap4 without ng-bootstrap, if you just need it for the styling.

answered Nov 9, 2017 at 14:40

Venomy

2,24419 silver badges26 bronze badges

2 Comments

Adithya Sai Over a year ago

Hi @venomy i have tried this already but this did not work. When i tried to add this "v4-alpha.getbootstrap.com/components/navbar". I did not get anything. Upto my knowledge ng-bootstrap is just for the bootstrap components.

Venomy Over a year ago

Ah sorry, I did not realize you only needed the CSS. In this case I think @Manu 's solution should work. And you should make sure you have the right classes on your navbar. Keep in mind some functions of the bootstrap are not yet available in Angular

Collectives™ on Stack Overflow

Build navbar for angular 4 app using bootstrap 4

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related