Angular 7 com Bootstrap 4

Se assim como eu, você enfrenta certa dificuldade em codificar interfaces gráficas bonitas, responsivas e performáticas, veja como é fácil integrar um dos frameworks mais famosos nessa empreitada. O Bootstrap na versão 4.

Iremos utilizar o Angular 7 para construir nossa aplicação exemplo e a lib NGXBootstrap que facilita a integração e suporta as últimas versões do Angular.

Após a criação do projeto o passo seguinte é instalar a lib.

Há dois métodos para a tarefa.

No primeiro você precisa instalar e configurar manualmente, porém a segunda abordagem faz uso de schematics, atualizando as dependências e configurações necessárias para inicialização do app.

No diretório do projeto, informe no terminal:

$ ng add ngx-bootstrap

Finalizado o processo, observe no package.json a inclusão de duas dependências :

E ainda, a inclusão de dois estilos no angular.json:

angular.json

Cada componente possui um módulo, assim, se ao utilizar o Accordion, você deve importar o módulo correspondente.

Observe o código no arquivo app.component.ts

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { AppRoutingModule } from ‘./app-routing.module’;
import { AppComponent } from ‘./app.component’;
import { AccordionModule } from ‘ngx-bootstrap/accordion’;
@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 AppRoutingModule,
 AccordionModule.forRoot()
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

No template do componente (app.component.html) deixei assim:

<div class=”p-3">
 <accordion>
 <accordion-group heading=”Mortal Kombat 11">
 <li>Bolsonaro</li>
 <li>Haddad</li>
 <li>Ciro</li>
 </accordion-group> <accordion-group heading=”Mortal Kombat X”>
 <li>Scorpion</li>
 <li>SubZero</li>
 <li>Raiden</li>
 </accordion-group>
 <accordion-group heading=”Mortal Kombat 9">
 <li>Liu Kang</li>
 <li>Kano</li>
 <li>Sonia</li>
 </accordion-group>
 </accordion>
</div>

Ao iniciar o servidor local (ng serve), o resultado deve ser assim:

Conforme aumenta a necessidade de incluir componentes, e isso vai acontecer ;) , o módulo principal poderá poluir de imports, ficando difícil a manutenção.

Considere utilizar lazy loading para os componentes da aplicação ou criar um módulo específico. No terminal, digite:

$ ng g module modules/ngxbootstrap

O comando anterior cria um módulo NgxBoostrap na pasta modules.

Informei três componentes (Accordion, DatePicker e Alert) para exemplificar. Logo, meu módulo responsável pelos componentes bootstrap ficou da seguinte maneira:

import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { AccordionModule } from ‘ngx-bootstrap/accordion’;
import { BsDatepickerModule } from ‘ngx-bootstrap/datepicker’;
import { AlertModule } from ‘ngx-bootstrap/alert’;
@NgModule({
 declarations: [],
 imports: [
 CommonModule,
 AccordionModule.forRoot(),
 BsDatepickerModule.forRoot(),
 AlertModule.forRoot()
 ],
 exports:[AccordionModule, BsDatepickerModule, AlertModule]
})
export class NgxBootstrapModule { }

Não esqueça de importar este módulo agora no módulo root (app.module.ts)

//trecho omitido
imports: [BrowserModule,AppRoutingModule,NgxBootstrapModule],

Código do projeto no Github.

Até mais.