Instalando Bootstrap em uma aplicação Angular (com ngx-bootstrap)
Tags: angular, bootstrap, javascript
Published: 2019-06-18 13:54:05

Instale o pacote do bootstrap, via npm:
```cmd
npm i bootstrap --save
```
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:
```json
{
  "projects": {
    "nome-do-projeto": {
      ...
      "architect": {
        "build": {
          ...
          "styles": [
            "node_modules/bootstrap/dist/css/bootstrap.min.css",
            "src/styles.scss"
          ]
        }
      }
    }
  } 
}
```
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:
```cmd
npm i ngx-bootstrap --save
```
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:
```typescript
import { BsDropdownModule } from 'ngx-bootstrap';

@NgModule({
  imports: [
 BsDropdownModule.forRoot(),
 ...
  ]
})
export class AppModule(){}
```
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:

```html
<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>
```
Pronto! O dropdown deve estar funcionando corretamente e sua aplicação preparada para usar bootstrap!