Instalando Bootstrap em uma aplicação Angular (com ngx-bootstrap)
Felipe Carvalho
Posted on June 18, 2019
Instale o pacote do bootstrap, via npm:
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:
{
"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:
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:
import { BsDropdownModule } from 'ngx-bootstrap';
@NgModule({
imports: [
BsDropdownModule.forRoot(),
...
]
})
export class AppModule(){}
- Adicione a diretiva dropdown à div que irá conter seu dropdown.
- Adicione a diretiva dropdownToggle ao botão.
- 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>
Pronto! O dropdown deve estar funcionando corretamente e sua aplicação preparada para usar bootstrap!
Posted on June 18, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.