Twitter Bootstrap Question posted in

Can someone clear up some confusion on how to use twitter bootstrap and Angular 4 together?

So I’ve been dabbling with Angular (4.x.x) and I wanted to use twitter bootstrap cause it looks nice.

Here’s where the confusion starts:
Bootstrap requires jQuery. However, the consensus seems to be, don’t use jQuery in an Angular app.

So, there seems to be some GitHub projects that have native Angular code to take jQuery out of the equation.

I look into ng-bootstrap, and head over to their docs on how to install it. All goes well, except the CSS styles aren’t included, nor does the docs tell you how to get the CSS styles in. Seems like a basic necessity for a “Getting Started” guide, but whatever.

So I do some Google-fu and find a clean looking, more complete guide on how to get ng-bootstrap installed AND the styles.

https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a

Then I get to the paragraph that has me doing the Jackie Chan meme..

Ng-Bootstrap contains a set of native Angular directives based on Bootstrap’s markup and CSS. As a result no dependency on jQuery or Bootstrap’s JavaScript is required.
…
Now add bootstrap.min.css, jquery.min.js and bootstrap.min.js to you .angular-cli.json file, like we did it before.

If ng-bootstrap is supposed to remove the need for jquery and boostrap JS, why am I adding the bootstrap.min.js and jquery.min.js?!

I can’t find a reasonable explanation. Can someone please clear up this confusion?

Tags:

3

Answers


  1. 0

    I don’t think you need to add bootstrap.min.js or jquery.min.js to use ng-bootstrap. Please check following link.

    https://github.com/ng-bootstrap/ng-bootstrap

    Anyhow bootstrap is using jquery internally. It does not mean you need to use it in your components, directives etc. And using jquery inside angular is strongly discouraged.

    Edit

    For the Confusion:

    ng-bootstrap contains a set of native Angular directives based on Bootstrap’s markup and CSS. As a result no dependency on jQuery or Bootstrap’s JavaScript is required. The only required dependencies are:

    Angular

    Bootstrap CSS

    ng-bootstrap getting started

    Login or Signup to reply.
  2. 0

    In your app Angular in the file .angular-cli.json put this

     "styles": [
    "styles.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ]

    you must installed npm packgage of bootstrap

    I hope that it helps you

    Login or Signup to reply.
  3. 0

    When people say you don’t want to use jquery in your Angular projects, they mean directly in your components or html. Using third party npm modules is completely fine, and bootstrap can be quickly and easily integrated into your Angular environment in a clean and safe way. I’d highly recommend you use Angular-CLI if you’re not already.

    Simply npm install --save boostrap, and then include the css files and scripts required in your your .angular-cli.json.

      "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "styles.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/tether/dist/js/tether.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

    note: As you mentioned even these “Angular bootstrap” modules are using the jquery and bootstrap css, and from my experience bring absolutely nothing new to the table. They may have had a use back when Angular and bootstrap were evolving quickly side by side, but nowadays are more work with no reward.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search