¿Cuál es la diferencia entre "ng-bootstrap" y "ngx-bootstrap"?


231

¿Cuál es la diferencia entre "ng-bootstrap" y "ngx-bootstrap"? ¿Están relacionados entre sí? ¿O son simplemente implementaciones concurrentes?

¿Alguien ha trabajado con ambos y puede dar / explicar los pros y los contras de ambos?

Con "ng-bootstrap" me refiero a https://ng-bootstrap.github.io/#/home y

con "ngx-bootstrap" me refiero a http://valor-software.com/ngx-bootstrap/ .

Ambos relacionados con Angular 4 (¡ no con AngularJS! ) Y Bootstrap 4.

Tenga en cuenta que esta no es una pregunta duplicada de diferencia entre ngx-bootstrap y ng2 bootstrap? .


17
ngx-bootstrapsuministra bootstrap 3 y 4, mientras que ng-bootstrap(ui-bootstrap en AngularJs) solo admite bootstrap 4.
developer033

1
Creo que la respuesta de @snorkpete merece que se establezca como Respuesta correcta, se tomó el tiempo para encontrar la respuesta y escribirla. es una buena cultura volver y leer las respuestas a su pregunta que ha colocado en stackoverflow, y luego revisarlas y, si está satisfecho con una, elija eso como respuesta correcta
hossein bakhtiari

Respuestas:


213

ng-bootstrap y ngx-bootstrap son dos proyectos diferentes de dos equipos de proyectos diferentes que intentan lograr más o menos lo mismo, lo que le permite usar Bootstrap en Angular (2+) sin el uso de jQuery.

Ambos están reconstruyendo los componentes de Bootstrap utilizando solo Angular (no jQuery). Las principales diferencias están en torno a qué versión de Bootstrap admiten.

  • ngx-bootstrap es compatible con Bootstrap 3 y 4.
  • ng-bootstrap es compatible con Bootstrap 4 y requiere Angular 5+.

Esto significa que si necesita usar Bootstrap versión 3, entonces ngx-bootstrap es su única opción real de las dos. Si puede usar Bootstrap 4, puede elegir entre los dos proyectos.

La otra diferencia (potencialmente significativa) son los equipos detrás de los proyectos. El punto clave a tener en cuenta a este respecto es que el equipo detrás de ng-bootstrap también fue responsable de angular-ui-bootstrap, la versión AngularJS (es decir, 1.x) de la biblioteca Bootstrap.


3
Esa es una pregunta para los dos líderes del equipo. Desde el exterior mirando hacia adentro, tienen objetivos ligeramente diferentes, por lo que supongo que eso tiene algo que ver con eso, pero eso es solo una conjetura de mi parte
snorkpete

¿Sería un problema si incluimos ambas bibliotecas en nuestro proyecto angular? Si es así, ¿qué tipo de problemas se esperan?
RITZ XAVI

probablemente posible, pero parece excesivo. Si no te importa tanto y estás usando Bootstrap 4, solo elige uno (al azar si es necesario).
Snorkpete

38

Estaba pensando en qué usar para mi proyecto y luego, después de comparar ambos proyectos, creo que ngx-bootstrap de valor-software es una mejor opción ya que tiene animación incorporada en su componente modal. Ng-bootstrap la animación aún no está presente, una ventana emergente modal sin una animación es un gran fastidio. Otra razón es que Ng-bootstrap todavía está en beta y no pude usarlo para mi aplicación de producción al compararlo con ngx-bootstrap, que ya tiene una versión candidata de lanzamiento (22/12/2017). Sin embargo, deseo buena suerte a ambos proyectos y espero encontrar soluciones sólidas.


3
Ng-bootstrap 1.0.0 ya está disponible y el compilador AOT se construye sin problemas. Ver github.com/ng-bootstrap/ng-bootstrap/blob/master/CHANGELOG.md
Stevethemacguy

16

De acuerdo con @Dilshan. También tomé la decisión de elegir ngx-bootstrap para nuestro nuevo producto. Después de algunas investigaciones, descubrí que ngx es más maduro y estable para la producción. ng-bootstrap está en desarrollo.

Un buen recurso de referencia, CoreUI.io tiene un proyecto de muestra CoreUI + Angular 5.x + ngx-bootstrap completamente funcional . De hecho, aprendí ngx de este proyecto. Puede navegar por su vista previa en vivo o descargar el paquete del proyecto.


8
Depende de cómo se defina "maduro", ya que ngx-bootstrap ni siquiera tiene una sola prueba en nada. Donde como ng-bootstrap parece tener prueba en todo.
Ricki Runge

Es bueno saberlo, gracias por compartir. Creo que ng-bootstrap es el camino correcto. Mencioné la madurez solo porque se acaba de lanzar hace una semana. ("esta biblioteca es un trabajo en progreso ...")
Jiping

44
En el ecosistema front-end de código abierto de hoy, maduro parece significar 'lanzado hace más de 2 meses'. ;)
Eric Soyke

9

He usado ngx-bootstrap (por Valor) y ng-bootstrap (por ng-boostrap). Aquí están mis dos centavos de las características únicas que obtienes de ellos:

ngx-bootstrap:

  1. Soporte de animación incorporado en casi todo (modales, acordeón, collpasa, menú desplegable, selector de fechas ...)
  2. Mejor soporte modal (modales anidados, modal como servicio, modal como plantilla)
  3. Componente ordenable (con función de arrastrar y soltar)

ng-bootstrap:

  1. Función de navegación (el conjunto de pestañas ha quedado en desuso)
  2. Componente de pan tostado incorporado
  3. El tamaño del paquete es casi la mitad que ngx-bootstrap (Minified + Gzipped)

También puede comparar entre sus conteos de descargas de npm con npmtrends .

[Nota: Mi respuesta se basa en la última versión actual, es decir, ngx-bootstrap v5.5.0 y ng-boostrap v6.0.0]


7

Una diferencia está en el formato utilizado por su selector de fecha. ng-bootstrap usa un objeto, pero ngx-bootstrap tomará una cadena que es mucho más fácil de usar.


7

ng-bootstrap no parece ser compatible: la solicitud principal es appendTo body y el responsable de mantenimiento dice que no está trabajando en el proyecto.

He estado cambiando todo a ngx-bootstrap


7

El ng-bootstrap mencionado en la pregunta (el que se encuentra en https://ng-bootstrap.github.io ) no es el paquete npm ng-bootstrap.

En cambio, el paquete npm es @ ng-bootstrap / ng-bootstrap

Está desarrollado por un equipo diferente.

$ npm view @ ng-bootstrap / ng-bootstrap

@ ng-bootstrap / ng-bootstrap @ 3.2.0 | MIT | deps: 1 | versiones: 61 Bootstrap con motor angular https://github.com/ng-bootstrap/ng-bootstrap#readme

El paquete npm ng-bootstrap parece ser una versión anterior de ngx-bootstrap.


4

No tanto una respuesta como un comentario extendido ...

No estoy tan seguro de que los equipos sean independientes. Ejecutar npm view ngx-bootstrapy npm view ng-bootstrapmostrar que ambos fueron publicados con la misma cuenta de correo electrónico.

Estoy pensando que los dos equipos están relacionados.

vista 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>

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>

99
ng-bootstrap es un nombre antiguo para ngx-bootstrap . Para ng-bootstrap.github.io , el nombre del paquete npm es @ ng-bootstrap / ng-bootstrap , es decirnpm view @ng-bootstrap/ng-bootstrap
atao el

1
suena más como ese tipo "valorkin" era de ng-bootstrap y abrió su propio equipo "valor-software" para ngx
Facundo Colombier
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.