Se assim como eu você enfrenta certa dificuldade para 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.

Usaremos 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:

Cada componente possui um módulo. Assim, 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!