DEV Community

Cover image for Instalando Bootstrap em uma aplicação Angular (com ngx-bootstrap)
Felipe Carvalho
Felipe Carvalho

Posted on

3 1

Instalando Bootstrap em uma aplicação Angular (com ngx-bootstrap)

Instale o pacote do bootstrap, via npm:

npm i bootstrap --save
Enter fullscreen mode Exit fullscreen mode

Terminado o download, o bootstrap deverá constar nas dependencies de seu package.json e você conseguirá localizá-lo na sua pasta node_modules.
Agora, basta adicionar o CSS do pacote baixado em seu angular.json, dentro da seção styles, conforme código abaixo:

{
  "projects": {
    "nome-do-projeto": {
      ...
      "architect": {
        "build": {
          ...
          "styles": [
            "node_modules/bootstrap/dist/css/bootstrap.min.css",
            "src/styles.scss"
          ]
        }
      }
    }
  } 
}
Enter fullscreen mode Exit fullscreen mode

Com isso você já pode usar praticamente tudo que o bootstrap oferece, exceto os componentes um pouco mais complexos, que utilizam JQuery, como o collapse, o dropdown e o carousel, por exemplo.
Como o Angular já é o responsável por manipular o DOM e faz inúmeros verificações nele durante a execução, não é uma boa prática adicionar o JQuery para o mesmo fim, pois isso poderia, inclusive, quebrar a aplicação caso o Angular armazene um estado de algum elemento e o JQuery o modifique sem "comunicar" o Angular.
Infelizmente, o bootstrap não disponibiliza nenhuma biblioteca oficial para trabalhar com o Angular, porém temos 2 alternativas:

  • ngx-bootstrap
  • ng-bootstrap Como prefiro a documentação do ngx-bootstrap e nunca tive problema com o mesmo, acabo sempre optando por ele, logo, o usarei como exemplo:

Instale o pacote ngx-bootstrap:

npm i ngx-bootstrap --save
Enter fullscreen mode Exit fullscreen mode

Agora basta importar os módulos referentes ao componente que deseja usar ao seu app.module ou algum outro módulo da sua aplicação e usar as diretivas.
Como dito anteriormente, gosto muito da documentação do ngx-bootstrap, então recomendo lê-la para entender como usar o que ela disponibiliza. De qualquer forma, segue uma explicação de como criar um dropdown, baseado num exemplo da própria documentação do ngx-bootstrap:

Adicione o módulo de dropdown ao app.module da aplicação:

import { BsDropdownModule } from 'ngx-bootstrap';

@NgModule({
  imports: [
 BsDropdownModule.forRoot(),
 ...
  ]
})
export class AppModule(){}
Enter fullscreen mode Exit fullscreen mode
  1. Adicione a diretiva dropdown à div que irá conter seu dropdown.
  2. Adicione a diretiva dropdownToggle ao botão.
  3. Adicione a diretiva (estrutural, com asterísco) *dropdownMenu ao seu menu.

Demonstração de uso das diretivas abaixo:

<div class="btn-group" dropdown>
  <button id="button-basic" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
          aria-controls="dropdown-basic">
    Button dropdown <span class="caret"></span>
  </button>
  <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-basic">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

Pronto! O dropdown deve estar funcionando corretamente e sua aplicação preparada para usar bootstrap!

Tiugo image

Fast, Lean, and Fully Extensible

CKEditor 5 is built for developers who value flexibility and speed. Pick the features that matter, drop the ones that don’t and enjoy a high-performance WYSIWYG that fits into your workflow

Start now

Top comments (0)

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay