Angular 4 com o ngx-bootstrap

Como usar o ngx-bootstrap com o Angular 4

Quem, assim como eu, gosta do bootstrap já está acostumado com os componentes que fazem parte do pacote como o modal ou alerts. Quando eu comecei a usar o Angular 4 tive alguma dificuldade em implementá-los à mão, até que eu descobri o ngx-bootstrap que quebrou, não um galho, mas uma árvore inteira pra mim.

Inicio

Nesse tutorial vou mostrar como configurar o ngx-bootstrap, para isso, vamos usar os seguintes componentes: modal, popover e ratings.

Vamos iniciar criando um novo projeto com o "@angular/cli"

$ ng new sampleNgx --style scss
$ cd sampleNgx
$ vscode ./

E agora adicionar os componentes que vamos usar nesse projeto o "bootstrap" e o "ngx-bootstrap".

$ yarn add bootstrap ngx-bootstrap

Codificando

Vamos fazer algumas alterações no nosso código.

A primeira coisa que vamos fazer é adicionar o css do bootstrap para o style.scss.

Agora temos que alterar o arquivo "app.module.ts" e incluir os modulos (ModalModule, PopoverModule, RatingModule) do ngx-bootstrap que vamos usar no nosso projeto.

E vamos alterar também o "app.component.ts" e adicionar os métodos que vamos usar no nosso componente para abrir a janela modal do bootstrap.

E por último alterar o arquivo "app.component.html" e incluir o nosso html.

Para testar é só rodar o $ ng serve --open .

Angular 4 com ngx-bootstrap

Conclusão

O ngx-bootstrap facilita muito a utilização dos componentes de javascript do bootstrap dentro do Angular.

Para facilitar o entendimento eu subi um exemplo online aqui e o source está disponível no github aqui.