287

What is the difference between ng-bootstrap and ngx-bootstrap? Are they related to each other? Or are they simply concurrent implementations?

Has someone worked with them both and can give/explain pros and cons of both?

With ng-bootstrap I mean ng-bootstrap.github and

with ngx-bootstrap I mean valor-software-ngx-bootstrap.

Both related to Angular 4 (not to AngularJS!) and Bootstrap 4.

Please note that this is not a duplicated question of difference between ngx-bootstrap and ng2 bootstrap?.

Osama Rizwan
  • 615
  • 1
  • 7
  • 19
wolfrevo
  • 6,651
  • 2
  • 26
  • 38
  • 17
    `ngx-bootstrap` suppprts bootstrap 3 & 4, while `ng-bootstrap` (ui-bootstrap in AngularJs) supports only bootstrap 4. – developer033 May 03 '17 at 12:22
  • 2
    i think @snorkpete answer deserves the to be set as a Correct Answer, he took time to find answer, and write it. it's a good culture to come back and read the answers for your question you've placed in stackoverflow, and then review them and if you're satisfied with one, choose that as a correct answer – hossein bakhtiari Nov 11 '18 at 08:52

9 Answers9

271

ng-bootstrap and ngx-bootstrap are two different projects by two different project teams that are trying to accomplish more or less the same thing - allowing you to use Bootstrap in Angular (2+) without the use of jQuery.

They are both rebuilding the Bootstrap components using only Angular (no jQuery).The main differences are around which version of Bootstrap they support.

  • ngx-bootstrap supports Bootstrap 3 and 4.
  • ng-bootstrap supports Bootstrap 4 and requires Angular 5+.

This means that if you need to use Bootstrap version 3, then ngx-bootstrap is your only real option of the two. If you can use Bootstrap 4, then you can pick between the two projects.

The other (potentially significant) difference is the teams behind the projects. The key point to note in this regard is that the team behind ng-bootstrap was also responsible for angular-ui-bootstrap - the AngularJS (i.e. 1.x) version of the Bootstrap library.

snorkpete
  • 14,278
  • 3
  • 40
  • 57
  • 3
    That's a question for the two team leads. From the outside looking in, they have slightly different goals, so I'd guess that has something to do with it, but that's just conjecture on my part – snorkpete Oct 31 '17 at 16:51
  • Would it be a problem if we include both the libraries in our angular project ? If so, what kind of issues are expected ? – RITZ XAVI Feb 12 '20 at 16:37
  • probably possible, but seems like overkill. If you don't care that much and you're using Bootstrap 4, just pick one (randomly if you have to). – snorkpete Feb 13 '20 at 22:52
  • If I want a drop down menu with sub-menus, which one can achieve the goal? – Bigeyes Jan 24 '21 at 02:04
46

2022 update: Both of the libraries have updated a lot and made many improvements. But they vary on the components implemented from original bootstrap. Below are key differences between them.

ngx-bootstrap:

  1. Dedicated button directives
  2. Better Modal support (nested modals, modal as a service, modal as a template)
  3. Sortable Component (with Drag&Drop Feature)

ng-bootstrap:

  1. OffCanvas feature of bootstrap supported.
  2. Toast feature implemented
  3. Highlighted on Bootstrap docs framework list

Other Comparison tools:

  • npmtrends : comparison between their npm download counts
  • npmcompare: general comparison between the packages.

2021 Update: From v8.0.0 in ng-boostrap animations are turned on by default and available on all standard bootstrap components.

2020 Update:

I've used both ngx-bootstrap(by Valor) and ng-bootstrap(by ng-boostrap). Here are my two cents of the unique features you get from them:

ngx-bootstrap:

  1. Builtin animation support on almost everything (modals, accordion, collpase, dropdown, datepicker...)
  2. Better Modal support (nested modals, modal as a service, modal as a template)
  3. Sortable Component (with Drag&Drop Feature)

ng-bootstrap:

  1. Nav Feature (Tabset has been made deprecated)
  2. Builtin Toast component
  3. Package size is almost half times as ngx-bootstrap (Minified + Gzipped)

[Note: My answer is based current latest version i.e ngx-bootstrap v5.5.0 and ng-boostrap v6.0.0]

Imtiaz Shakil Siddique
  • 3,732
  • 30
  • 37
44

I was thinking about what to use for my project and then after comparing both the projects I think ngx-bootstrap by valor-software is a better option since it has animation built into it's modal component. Ng-bootstrap the animation is still not present, A modal popping up without a animation is a major bummer. Other reason is that Ng-bootstrap is still in beta and I was unable to use it for my production application when comparing with ngx-bootstrap which already has a release candidate version out (12.22.2017). However I wish both the projects good luck and will hopefully come up with solid solutions.

Dilshan Liyanage
  • 4,440
  • 2
  • 31
  • 33
  • 3
    Ng-bootstrap 1.0.0 is now available and the AOT compiler builds with no issues. See https://github.com/ng-bootstrap/ng-bootstrap/blob/master/CHANGELOG.md – Stevethemacguy Feb 15 '18 at 01:30
19

Agree with @Dilshan. I also made the decision to choose ngx-bootstrap for our new product. After some research, I found ngx is more mature and stable for production. ng-bootstrap is under development.

A good resource for reference, CoreUI.io has a full functional CoreUI + Angular 5.x + ngx-bootstrap sample project. I actually learned ngx from this project. You can browse its live preview or download the project package.

Jiping
  • 700
  • 1
  • 9
  • 12
  • 12
    Depends on how you define "mature", as ngx-bootstrap doesn't even have a single test on anything. Where as ng-bootstrap seems to have test on everything. – Ricki Runge Feb 04 '18 at 20:09
  • Good to know, thank you for sharing. I believe ng-bootstrap is the right way to go. I mentioned maturity only because it was just released a week ago. ("this library is a work in progress ...") – Jiping Feb 06 '18 at 01:19
  • 4
    In today's open source front-end ecosystem, mature now seems to mean 'released more than 2 months ago'. ;) – Eric Soyke May 30 '18 at 14:18
10

One difference is in the format used by their date picker. ng-bootstrap uses an object, but ngx-bootstrap will take a string which is way easier to use.

BBaysinger
  • 6,614
  • 13
  • 63
  • 132
9

The ng-bootstrap referred to in the question (the one at https://ng-bootstrap.github.io) is not the npm package ng-bootstrap.

Instead, the npm package is @ng-bootstrap/ng-bootstrap

It is developed by a different team.

$ npm view @ng-bootstrap/ng-bootstrap

@ng-bootstrap/ng-bootstrap@3.2.0 | MIT | deps: 1 | versions: 61 Angular powered Bootstrap https://github.com/ng-bootstrap/ng-bootstrap#readme

The npm package ng-bootstrap looks to be indeed an older version of ngx-bootstrap.

Thor
  • 251
  • 2
  • 9
8

ng-bootstrap doesn't appear to be supported - the top request is appendTo body and the maintainer says he isn't working on the project.

I've been switching everything to ngx-bootstrap

Steve
  • 387
  • 4
  • 11
6

Not so much an answer as an extended comment...

I'm not so sure about the teams being independant. Running npm view ngx-bootstrap and npm view ng-bootstrap show that both were published with the same email account.

I'm thinking the two teams are related.

npm view ngx-bootstrap

C:\:
17:07:25.16>npm view ngx-bootstrap

ngx-bootstrap@3.0.1 | MIT | deps: none | versions: 40
Native Angular Bootstrap Components
https://github.com/valor-software/ngx-bootstrap#readme

keywords: angular, bootstap, ng, ng2, angular2, twitter-bootstrap

dist
.tarball https://registry.npmjs.org/ngx-bootstrap/-/ngx-    bootstrap-3.0.1.tgz
.shasum: e98d2fc6340f32a9d358cd08e8fda7dcb23bdab3
.integrity: sha512-ni91yYtn8ldgf/pxrlwl9lkVcLURGzopSpJnEbbgG1v1EZWTobI8y7J3mx4Kxptkn0EeiQwnLel67G7XJSox4A==
.unpackedSize: 8.4 MB

maintainers:
- valorkin <valorkin@gmail.com>

dist-tags:
latest: 3.0.1       next: 3.0.1         test: 0.0.0-test.0

published a month ago by valorkin <valorkin@gmail.com>

npm view ng-bootstrap

C:\:
17:16:42.36>npm view ng-bootstrap

ng-bootstrap@1.6.3 | MIT | deps: 1 | versions: 8
Native Angular Bootstrap Components
https://github.com/valor-software/ngx-bootstrap#readme

keywords: ng, ng-bootstap, angular, angular2, bootstrap, twitter-bootstrap

dist
.tarball https://registry.npmjs.org/ng-bootstrap/-/ng-bootstrap-1.6.3.tgz
.shasum: d41fd42154c0593422cb83c473a3828aa7525bf5

dependencies:
moment: 2.18.1

maintainers:
- pkozlowski_os <pkozlowski.opensource@gmail.com>
- ng-bootstrap <foxandxss@gmail.com>

dist-tags:
beta: 1.1.16-3  latest: 1.6.3

published a year ago by valorkin <valorkin@gmail.com>
Zarepheth
  • 2,465
  • 2
  • 32
  • 49
  • 11
    *ng-bootstrap* is an old name for *ngx-bootstrap*. For https://ng-bootstrap.github.io, the npm package name is *@ng-bootstrap/ng-bootstrap*, ie `npm view @ng-bootstrap/ng-bootstrap` – atao Sep 04 '18 at 11:00
  • 1
    sounds more like that "valorkin" guy was from ng-bootstrap and opened his own team "valor-software" for ngx – Facundo Colombier Nov 15 '18 at 19:36
4

it depends on needs but following rule of thumb, ng-bootstrap is more suitable in general due to following:

  • ng-bootstrap has more stars
  • ng-bootstrap is relatively newer solution
  • ng-bootstrap is lighter

If I don't have any specific reason to go for bootstrap 3, then ng-bootstrap should be preferred.

please refer to following github repos for more details about fact and figures:

Imran Javed
  • 11,779
  • 2
  • 16
  • 17