Image for post
Image for post

Se assim como eu, você enfrenta certa dificuldade em codificar interfaces gráficas bonitas, responsivas e performáticas, veja como é fácil integrar um dos frameworks mais famosos nessa empreitada. O Bootstrap na versão 4.

Iremos utilizar o Angular 7 para construir nossa aplicação exemplo e a lib NGXBootstrap que facilita a integração e suporta as últimas versões do Angular.

Image for post
Image for post

Após a criação do projeto o passo seguinte é instalar a lib.

Há dois métodos para a tarefa.

No primeiro você precisa instalar e configurar manualmente, porém a segunda abordagem faz uso de schematics, atualizando as dependências e configurações necessárias para inicialização do app.

No diretório do projeto, informe no terminal:

Finalizado o processo, observe no package.json a inclusão de duas dependências :

Image for post
Image for post

E ainda, a inclusão de dois estilos no angular.json:

Image for post
Image for post
angular.json

Cada componente possui um módulo, assim, se ao utilizar o Accordion, você deve importar o módulo correspondente.

Observe o código no arquivo app.component.ts

No template do componente (app.component.html) deixei assim:

Ao iniciar o servidor local (ng serve), o resultado deve ser assim:

Image for post
Image for post

Conforme aumenta a necessidade de incluir componentes, e isso vai acontecer ;) , o módulo principal poderá poluir de imports, ficando difícil a manutenção.

Considere utilizar lazy loading para os componentes da aplicação ou criar um módulo específico. No terminal, digite:

O comando anterior cria um módulo NgxBoostrap na pasta modules.

Informei três componentes (Accordion, DatePicker e Alert) para exemplificar. Logo, meu módulo responsável pelos componentes bootstrap ficou da seguinte maneira:

Não esqueça de importar este módulo agora no módulo root (app.module.ts)

Image for post
Image for post

Código do projeto no Github.

Até mais.

Written by

Professor e desenvolvedor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store