Qual é a diferença entre "ng-bootstrap" e "ngx-bootstrap"?


231

Qual é a diferença entre "ng-bootstrap" e "ngx-bootstrap"? Eles estão relacionados um com o outro? Ou são simplesmente implementações simultâneas?

Alguém já trabalhou com os dois e pode dar / explicar os prós e os contras de ambos?

Com "ng-bootstrap", quero dizer https://ng-bootstrap.github.io/#/home e

com "ngx-bootstrap", quero dizer http://valor-software.com/ngx-bootstrap/ .

Ambos relacionados ao Angular 4 ( não ao AngularJS! ) E ao Bootstrap 4.

Observe que essa não é uma questão duplicada de diferença entre o ngx-bootstrap e o ng2 bootstrap? .


17
ngx-bootstrapsuppprts inicializar 3 e 4, enquanto ng-bootstrap(ui-inicialização em AngularJS) suporta apenas o bootstrap 4.
developer033

1
Eu acho que a resposta @snorkpete merece que seja definida como uma resposta correta, ele levou um tempo para encontrar a resposta e escrevê-la. é uma boa cultura de voltar e ler as respostas para a pergunta que você colocou no stackoverflow, e depois analisá-los e se você está satisfeito com um, escolher isso como uma resposta correta
Hossein Bakhtiari

Respostas:


213

ng-bootstrap e ngx-bootstrap são dois projetos diferentes por duas equipes diferentes que estão tentando realizar mais ou menos a mesma coisa - permitindo que você use o Bootstrap em Angular (2+) sem o uso do jQuery.

Ambos estão reconstruindo os componentes do Bootstrap usando apenas Angular (sem jQuery). As principais diferenças estão relacionadas à versão do Bootstrap suportada.

  • O ngx-bootstrap suporta o Bootstrap 3 e 4.
  • O ng-bootstrap suporta o Bootstrap 4 e requer o Angular 5+.

Isso significa que, se você precisar usar o Bootstrap versão 3, o ngx-bootstrap é sua única opção real dos dois. Se você pode usar o Bootstrap 4, poderá escolher entre os dois projetos.

A outra diferença (potencialmente significativa) são as equipes por trás dos projetos. O ponto principal a ser observado a esse respeito é que a equipe por trás do ng-bootstrap também foi responsável pelo angular-ui-bootstrap - a versão AngularJS (ou seja, 1.x) da biblioteca Bootstrap.


3
Essa é uma pergunta para os dois líderes de equipe. Do lado de fora olhando para dentro, eles têm objetivos um pouco diferentes, então eu acho que tem algo a ver com isso, mas isso é apenas conjectura da minha parte
snorkpete

Seria um problema se incluíssemos as duas bibliotecas em nosso projeto angular? Em caso afirmativo, que tipo de problemas são esperados?
RITZ XAVI

provavelmente possível, mas parece exagero. Se você não se importa muito e está usando o Bootstrap 4, basta escolher um (aleatoriamente, se for necessário).
snorkpete

38

Eu estava pensando sobre o que usar para o meu projeto e, depois de comparar os dois, acho que o ngx-bootstrap da valor-software é uma opção melhor, pois possui animação incorporada em seu componente modal. Ng-bootstrap a animação ainda não está presente. Um modal surgindo sem uma animação é uma grande chatice. Outro motivo é que o Ng-bootstrap ainda está na versão beta e não pude usá-lo para o meu aplicativo de produção ao comparar com o ngx-bootstrap que já possui uma versão candidata a lançamento (22.2.2017). No entanto, desejo a ambos os projetos boa sorte e espero que apresentem soluções sólidas.


3
O Ng-bootstrap 1.0.0 já está disponível e o compilador AOT é compilado sem problemas. Veja github.com/ng-bootstrap/ng-bootstrap/blob/master/CHANGELOG.md
Stevethemacguy

16

Concorde com @Dilshan. Também tomei a decisão de escolher o ngx-bootstrap para o nosso novo produto. Após algumas pesquisas, descobri que o ngx é mais maduro e estável para a produção. ng-bootstrap está em desenvolvimento.

Um bom recurso de referência, o CoreUI.io possui um projeto de exemplo funcional completo do CoreUI + Angular 5.x + ngx-bootstrap . Na verdade, eu aprendi ngx com esse projeto. Você pode navegar pela visualização ao vivo ou fazer o download do pacote do projeto.


8
Depende de como você define "maduro", pois o ngx-bootstrap nem sequer tem um único teste em nada. Onde ng-bootstrap parece ter teste em tudo.
Ricki Runge

É bom saber, obrigado por compartilhar. Eu acredito que o ng-bootstrap é o caminho certo a seguir. Mencionei a maturidade apenas porque foi lançada há uma semana. ("esta biblioteca é um trabalho em andamento ...")
Jiping

4
No atual ecossistema de front-end de código aberto, maduro agora parece significar 'lançado há mais de 2 meses'. ;)
Eric Soyke

9

Eu usei o ngx-bootstrap (pelo Valor) e o ng-bootstrap (pelo ng-boostrap). Aqui estão meus dois centavos dos recursos exclusivos que você obtém deles:

ngx-bootstrap:

  1. Suporte de animação integrado em quase tudo (modais, acordeão, collpase, dropdown, datepicker ...)
  2. Melhor suporte modal (modais aninhados, modal como serviço, modal como modelo)
  3. Componente classificável (com recurso de arrastar e soltar)

ng-bootstrap:

  1. Recurso de Navegação (Tabset foi descontinuado)
  2. Componente Toast incorporado
  3. O tamanho do pacote é quase metade do que o ngx-bootstrap (Minificado + Gzipado)

Você também pode comparar entre as contagens de download npm e npmtrends .

[Nota: Minha resposta é baseada na versão mais recente atual, isto é, ngx-bootstrap v5.5.0 e ng-boostrap v6.0.0]


7

Uma diferença está no formato usado pelo seletor de datas. O ng-bootstrap usa um objeto, mas o ngx-bootstrap aceita uma string que é bem mais fácil de usar.


7

O ng-bootstrap não parece ser suportado - a solicitação principal é appendTo body e o mantenedor diz que não está trabalhando no projeto.

Eu tenho mudado tudo para ngx-bootstrap


7

O ng-bootstrap referido na pergunta (aquele em https://ng-bootstrap.github.io ) não é o pacote npm ng-bootstrap.

Em vez disso, o pacote npm é @ ng-bootstrap / ng-bootstrap

É desenvolvido por uma equipe diferente.

$ npm view @ ng-bootstrap / ng-bootstrap

@ ng-bootstrap / ng-bootstrap @ 3.2.0 | MIT deps: 1 | versões: 61 Bootstrap com alimentação angular https://github.com/ng-bootstrap/ng-bootstrap#readme

O pacote npm ng-bootstrap parece ser de fato uma versão mais antiga do ngx-bootstrap.


4

Não é uma resposta, mas um comentário prolongado

Não tenho tanta certeza de que as equipes sejam independentes. Em execução npm view ngx-bootstrape npm view ng-bootstrapmostre que ambos foram publicados com a mesma conta de email.

Estou pensando que as duas equipes estão relacionadas.

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>

9
ng-bootstrap é um nome antigo para ngx-bootstrap . Para ng-bootstrap.github.io , o nome do pacote npm é @ ng-bootstrap / ng-bootstrap , isto énpm view @ng-bootstrap/ng-bootstrap
atao

1
Soa mais como que "valorkin" cara era de NG-bootstrap e abriu sua própria equipe de "valor-software" para NGX
Facundo Colombier
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.