Para as etapas detalhadas abaixo e um exemplo de trabalho, você pode visitar
https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/
Etapas muito detalhadas com explicação adequada.
Etapas:
Instalando Bootstrap do NPM
Em seguida, precisamos instalar o Bootstrap. Mude o diretório para o projeto que criamos (cd angular-bootstrap-example) e execute o seguinte comando:
Para Bootstrap 3:
npm install bootstrap --save
Para Bootstrap 4 (atualmente em beta):
npm install bootstrap@next --save
OU
Alternativa: CSS Bootstrap local
Como alternativa, você também pode baixar o CSS Bootstrap e adicioná-lo localmente ao seu projeto. Descarreguei o Bootstrap do site e criei uma pasta styles (mesmo nível que styles.css):
Nota:
Não coloque seus arquivos CSS locais na pasta de ativos. Quando fazemos a construção de produção com Angular CLI, os arquivos CSS declarados em .angular-cli.json serão minimizados e todos os estilos serão agrupados em um único styles.css. A pasta de ativos é copiada para a pasta dist durante o processo de construção (o código CSS será duplicado). Coloque seus arquivos CSS locais em ativos apenas no caso de importá-los diretamente no index.html.
Importando o CSS
1. Temos duas opções para importar o CSS do Bootstrap que foi instalado do NPM:
texto forte 1: Configurar .angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
2: Importe diretamente em src / style.css ou src / style.scss:
@import '~bootstrap/dist/css/bootstrap.min.css';
Eu pessoalmente prefiro importar todos os meus estilos em src / style.css, uma vez que já foi declarado em .angular-cli.json.
3.1 Alternativa: CSS Bootstrap local
Se você adicionou o arquivo CSS Bootstrap localmente, basta importá-lo em .angular-cli.json
"styles": [
"styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
"styles.scss"
],
ou
src / style.css
@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';
4: Componentes de Bootstrap JavaScript com ngx-bootstrap (Opção 1)
Caso você não precise usar componentes de Bootstrap JavaScript (que requerem JQuery), esta é toda a configuração de que você precisa. Mas se você precisa usar modais, acordeão, selecionador de data, dicas de ferramentas ou qualquer outro componente, como podemos usar esses componentes sem instalar o jQuery?
Existe uma biblioteca de wrapper Angular para Bootstrap chamada ngx-bootstrap que também podemos instalar a partir do NPM:
npm install ngx-bootstrap --save
Nota ng2-bootstrap e ngx-bootstrap são o mesmo pacote. ng2-bootstrap foi renomeado para ngx-bootstrap após #itsJustAngular.
Caso você queira instalar o Bootstrap e o ngx-bootstrap ao mesmo tempo ao criar seu projeto CLI Angular:
npm install bootstrap ngx-bootstrap --save
4.1: Adicionando os módulos Bootstrap necessários em app.module.ts
Vá até o ngx-bootstrap e adicione os módulos necessários em seu app.module.ts. Por exemplo, suponha que desejamos usar os componentes Suspenso, Dica de Ferramenta e Modal:
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
BrowserModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
// ...
})
export class AppBootstrapModule {}
Como chamamos o método .forRoot () para cada módulo (devido aos provedores do módulo ngx-bootstrap), as funcionalidades estarão disponíveis em todos os componentes e módulos do seu projeto (escopo global).
Como alternativa, se você gostaria de organizar o ngx-bootstrap em um módulo diferente (apenas para fins de organização, no caso de você precisar importar muitos módulos bs e não querer bagunçar seu app.module), você pode criar um módulo app-bootstrap.module.ts, importe os módulos do Bootstrap (usando forRoot ()) e também os declare na seção de exportações (para que fiquem disponíveis para outros módulos também).
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
CommonModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}
Por fim, não se esqueça de importar seu módulo de bootstrap em seu app.module.ts.
import {AppBootstrapModule} de './app-bootstrap/app-bootstrap.module';
@NgModule({
imports: [BrowserModule, AppBootstrapModule],
// ...
})
export class AppModule {}
ngx-bootstrap funciona com Bootstrap 3 e 4. E também fiz alguns testes e a maioria das funcionalidades também funcionam com Bootstrap 2.x (sim, ainda tenho alguns códigos legados para manter).
Espero que ajude alguém!
