Quelle est la différence entre «ng-bootstrap» et «ngx-bootstrap»?


231

Quelle est la différence entre "ng-bootstrap" et "ngx-bootstrap"? Sont-ils liés les uns aux autres? Ou s'agit-il simplement d'implémentations simultanées?

Quelqu'un a-t-il travaillé avec eux deux et peut-il expliquer / expliquer les avantages et les inconvénients des deux?

Avec "ng-bootstrap", je veux dire https://ng-bootstrap.github.io/#/home et

avec "ngx-bootstrap", je veux dire http://valor-software.com/ngx-bootstrap/ .

Tous deux liés à Angular 4 ( pas à AngularJS! ) Et Bootstrap 4.

Veuillez noter que ce n'est pas une question dupliquée de différence entre ngx-bootstrap et ng2 bootstrap? .


17
ngx-bootstrapsupprime le bootstrap 3 et 4, tandis que ng-bootstrap(ui-bootstrap dans AngularJs) ne prend en charge que le bootstrap 4.
developer033

1
Je pense que la réponse @snorkpete mérite d'être définie comme une réponse correcte, il a pris du temps pour trouver la réponse et l'écrire. c'est une bonne culture de revenir et de lire les réponses à votre question que vous avez placée dans stackoverflow, puis de les examiner et si vous en êtes satisfait, choisissez cela comme une bonne réponse
hossein bakhtiari

Réponses:


213

ng-bootstrap et ngx-bootstrap sont deux projets différents par deux équipes de projet différentes qui essaient d'accomplir plus ou moins la même chose - vous permettant d'utiliser Bootstrap dans Angular (2+) sans utiliser jQuery.

Ils reconstruisent tous les deux les composants Bootstrap en utilisant uniquement Angular (pas de jQuery). Les principales différences concernent la version de Bootstrap qu'ils prennent en charge.

  • ngx-bootstrap prend en charge Bootstrap 3 et 4.
  • ng-bootstrap prend en charge Bootstrap 4 et nécessite Angular 5+.

Cela signifie que si vous devez utiliser Bootstrap version 3, alors ngx-bootstrap est votre seule véritable option des deux. Si vous pouvez utiliser Bootstrap 4, vous pouvez choisir entre les deux projets.

L'autre différence (potentiellement significative) réside dans les équipes derrière les projets. Le point clé à noter à cet égard est que l'équipe derrière ng-bootstrap était également responsable de angular-ui-bootstrap - la version AngularJS (ie 1.x) de la bibliothèque Bootstrap.


3
C'est une question pour les deux chefs d'équipe. De l'extérieur, ils ont des objectifs légèrement différents, donc je suppose que cela a quelque chose à voir avec cela, mais c'est juste une conjecture de ma part
snorkpete

Serait-ce un problème si nous incluions les deux bibliothèques dans notre projet angulaire? Si oui, quels types de problèmes sont attendus?
RITZ XAVI

probablement possible, mais semble exagéré. Si vous ne vous en souciez pas tant et que vous utilisez Bootstrap 4, choisissez-en un (au hasard si vous le devez).
snorkpete

38

Je pensais à quoi utiliser pour mon projet, puis après avoir comparé les deux projets, je pense que ngx-bootstrap par valor-software est une meilleure option car il a une animation intégrée dans son composant modal. Ng-bootstrap l'animation n'est toujours pas présente, Un modal surgissant sans animation est une grosse déception. Une autre raison est que Ng-bootstrap est toujours en version bêta et je n'ai pas pu l'utiliser pour mon application de production lors de la comparaison avec ngx-bootstrap qui a déjà une version candidate à la sortie (12.22.2017). Cependant, je souhaite bonne chance aux deux projets et j'espère trouver des solutions solides.


3
Ng-bootstrap 1.0.0 est maintenant disponible et le compilateur AOT se construit sans problème. Voir github.com/ng-bootstrap/ng-bootstrap/blob/master/CHANGELOG.md
Stevethemacguy

16

D'accord avec @Dilshan. J'ai également pris la décision de choisir ngx-bootstrap pour notre nouveau produit. Après quelques recherches, j'ai trouvé que le ngx est plus mature et stable pour la production. ng-bootstrap est en cours de développement.

Une bonne ressource de référence, CoreUI.io a un exemple de projet CoreUI + Angular 5.x + ngx-bootstrap entièrement fonctionnel . J'ai en fait appris le ngx grâce à ce projet. Vous pouvez parcourir son aperçu en direct ou télécharger le package du projet.


8
Cela dépend de la façon dont vous définissez "mature", car ngx-bootstrap n'a même pas un seul test sur quoi que ce soit. Où comme ng-bootstrap semble avoir testé sur tout.
Ricki Runge

Bon à savoir, merci du partage. Je crois que ng-bootstrap est la bonne voie à suivre. Je n'ai mentionné la maturité que parce qu'elle vient de sortir il y a une semaine. ("cette bibliothèque est un travail en cours ...")
Jiping

4
Dans l'écosystème frontal open source d'aujourd'hui, mature semble désormais signifier «sorti il ​​y a plus de 2 mois». ;)
Eric Soyke

9

J'ai utilisé à la fois ngx-bootstrap (par Valor) et ng-bootstrap (par ng-boostrap). Voici mes deux cents des caractéristiques uniques que vous obtenez d'eux:

ngx-bootstrap:

  1. Prise en charge de l'animation intégrée sur presque tout (modaux, accordéon, collpase, liste déroulante, sélecteur de date ...)
  2. Meilleur support modal (modaux imbriqués, modal en tant que service, modal en tant que modèle)
  3. Composant triable (avec fonction glisser-déposer)

ng-bootstrap:

  1. Fonctionnalité de navigation (Tabset rendu obsolète)
  2. Composant Toast intégré
  3. La taille du paquet est presque la moitié du temps comme ngx-bootstrap (Minified + Gzipped)

Vous pouvez également comparer leur nombre de téléchargements npm avec npmtrends .

[Remarque: Ma réponse est basée sur la dernière version actuelle, à savoir ngx-bootstrap v5.5.0 et ng-boostrap v6.0.0]


7

Une différence réside dans le format utilisé par leur sélecteur de date. ng-bootstrap utilise un objet, mais ngx-bootstrap prendra une chaîne qui est beaucoup plus facile à utiliser.


7

ng-bootstrap ne semble pas être pris en charge - la première demande est appendTo body et le responsable dit qu'il ne travaille pas sur le projet.

J'ai tout changé pour ngx-bootstrap


7

Le ng-bootstrap mentionné dans la question (celui à https://ng-bootstrap.github.io ) n'est pas le package npm ng-bootstrap.

Au lieu de cela, le package npm est @ ng-bootstrap / ng-bootstrap

Il est développé par une équipe différente.

$ npm vue @ ng-bootstrap / ng-bootstrap

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

Le paquet npm ng-bootstrap semble en effet être une ancienne version de ngx-bootstrap.


4

Pas tant une réponse qu'un commentaire étendu ...

Je ne suis pas sûr que les équipes soient indépendantes. En cours d'exécution npm view ngx-bootstrapet npm view ng-bootstrapmontrer que les deux ont été publiés avec le même compte de messagerie.

Je pense que les deux équipes sont liées.

vue npm 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>

vue npm 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>

9
ng-bootstrap est un ancien nom de ngx-bootstrap . Pour ng-bootstrap.github.io , le nom du package npm est @ ng-bootstrap / ng-bootstrap , c'estnpm view @ng-bootstrap/ng-bootstrap
atao

1
sonne plus comme ce type "valorkin" était de ng-bootstrap et a ouvert sa propre équipe "valor-software" pour ngx
Facundo Colombier
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.