Se você está desenvolvendo uma aplicação web moderna com Angular, provavelmente vai querer adicionar um framework de CSS robusto para acelerar o design e garantir responsividade. É aí que entra o Bootstrap, uma das bibliotecas front-end mais populares do mundo. Ele oferece uma ampla variedade de componentes prontos, como botões, formulários, grids e muito mais, todos otimizados para funcionar bem em dispositivos móveis.

Integrar o Bootstrap ao Angular pode parecer complicado à primeira vista, especialmente por conta da estrutura modular do Angular. Mas, na prática, o processo é direto e leva apenas alguns minutos com os comandos certos. O importante é entender a diferença entre instalar apenas o CSS do Bootstrap e integrar também os scripts JavaScript, o que exige um pouco mais de configuração.

Neste artigo, vou te mostrar passo a passo como instalar e configurar o Bootstrap corretamente em um projeto Angular, garantindo que tudo funcione como esperado, tanto visualmente quanto funcionalmente. Vamos lá?

Passo 1: Criando o projeto Angular (caso ainda não tenha)

Se você ainda não criou seu projeto Angular, basta usar o Angular CLI para iniciar um novo. No terminal, execute o seguinte comando:

ng new meu-projeto

Durante a criação, o CLI pode perguntar se você deseja adicionar o routing e qual formato de CSS deseja usar (SCSS, Less, etc.). Responda conforme sua preferência. Depois de criado, navegue até o diretório do projeto:

cd meu-projeto

Agora sim, podemos começar a instalação do Bootstrap.

E se você quer aprender a trabalhar com Angular do zero, seguindo um passo a passo didático que te economizará tempo e pesquisa em fóruns e no ChatGPT, te recomendo o Curso Angular Completo da Danki Code.

Passo 2: Instalando o Bootstrap via NPM

Com o projeto Angular já criado e aberto, você pode instalar o Bootstrap com o seguinte comando NPM:

npm install bootstrap

Esse comando adiciona o Bootstrap à pasta node_modules do seu projeto.

Agora que o Bootstrap está instalado, precisamos garantir que o Angular reconheça os arquivos de estilo.

Passo 3: Importando o Bootstrap no angular.json

Para que o CSS do Bootstrap seja aplicado à sua aplicação, você deve adicioná-lo ao arquivo angular.json. Localize a seção "styles" e adicione o caminho para o CSS do Bootstrap:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],

Se quiser também os scripts JavaScript do Bootstrap (necessários para modals, dropdowns, carousels, etc.), adicione também na seção "scripts":

"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
],

Depois disso, salve o arquivo e reinicie o servidor de desenvolvimento com:

ng serve

Agora, ao abrir seu navegador, você já poderá ver os estilos do Bootstrap aplicados ao seu projeto Angular.

Conclusão

Adicionar o Bootstrap ao Angular é uma maneira inteligente de acelerar o desenvolvimento da interface e garantir uma boa experiência do usuário desde os primeiros protótipos. Com apenas alguns comandos e configurações no angular.json, é possível usar os estilos e componentes do Bootstrap em conjunto com a estrutura poderosa do Angular.

Para saber quais estilos do Bootstrap você pode usar no seu projeto, acesse a documentação.

Lembre-se de que, apesar do Bootstrap ser uma ferramenta excelente, é importante manter a personalização e identidade visual da sua aplicação. Use os componentes como base, mas não tenha medo de criar seus próprios estilos quando necessário.

Desenvolver componentes reutilizáveis em seu projeto torna seu código mais limpo e facilita a manutenção.