A community of developers


Don’t Use jQuery and Bootstrap 4 with Angular 10, Use Ng-Bootstrap

You should definitely not to use jQuery in an Angular application, why?

If you need to use bootstrap, you can install the CSS styles without jquery and popper.js, and then use a component library like ng-bootstrap for the functionality.

Why not Using jQuery with Angular

jQuery manipulates the DOM on Its own and bypasses Angular’s change detection. This means that Angular no longer knows about DOM changes, and they’ll break when change detection runs. It may introduce some really nasty bugs.

What if I need to use Bootstrap to style my Angular app?

Bootstrap CSS comes with jquery which it uses to handle things like dropdowns, popovers, steppers, etc. The problem is that in Angular, jquery can cause some issues, so we leave it out. But that obviously means that those components that rely on jquery won’t work anymore.

Use libraries like ng-bootstrap.

Ng-Bootstrap only has components for the pieces of bootstrap that are dynamic and require javascript.

Component libraries like NG Bootstrap just replace those dynamic pieces with Angular components and directives. They don’t include any of the CSS because they’re not trying to replace the whole library, only the pieces that break without jquery.

The next version of Bootstrap – Bootstrap 5 – will not include jQuery but it’s still in the development stage at the time of this writing.


Leave a Reply

Skip to toolbar