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

felipedsc

Felipe Carvalho

Posted on June 18, 2019

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!

💖 💪 🙅 🚩
felipedsc
Felipe Carvalho

Posted on June 18, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related