Per i passaggi dettagliati di seguito e l'esempio di lavoro, puoi visitare
https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/
Passaggi molto dettagliati con una spiegazione adeguata.
Passaggi:
installazione di Bootstrap da NPM
Successivamente, dobbiamo installare Bootstrap. Cambia la directory nel progetto che abbiamo creato (cd angular-bootstrap-example) ed esegui il seguente comando:
Per Bootstrap 3:
npm install bootstrap --save
Per Bootstrap 4 (attualmente in beta):
npm install bootstrap@next --save
OPPURE
Alternativa: CSS Bootstrap locale
In alternativa, puoi anche scaricare il CSS Bootstrap e aggiungerlo localmente al tuo progetto. Ho scaricato Bootstrap dal sito Web e ho creato una cartella styles (stesso livello di styles.css):
Nota:
non posizionare i file CSS locali nella cartella delle risorse. Quando eseguiamo la build di produzione con Angular CLI, i file CSS dichiarati in .angular-cli.json verranno minimizzati e tutti gli stili verranno raggruppati in un unico styles.css. La cartella degli asset viene copiata nella cartella dist durante il processo di compilazione (il codice CSS verrà duplicato). Posiziona i tuoi file CSS locali sotto le risorse solo nel caso in cui li stai importando direttamente in index.html.
Importazione del CSS
1. Abbiamo due opzioni per importare il CSS da Bootstrap installato da NPM:
testo forte 1: configura .angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
2: importa direttamente in src / style.css o src / style.scss:
@import '~bootstrap/dist/css/bootstrap.min.css';
Personalmente preferisco importare tutti i miei stili in src / style.css poiché è già stato dichiarato in .angular-cli.json.
3.1 Alternativa: CSS Bootstrap locale
Se hai aggiunto il file CSS Bootstrap localmente, importalo semplicemente in .angular-cli.json
"styles": [
"styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
"styles.scss"
],
o
src / style.css
@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';
4: Componenti JavaScript Bootstrap con ngx-bootstrap (Opzione 1)
Nel caso in cui non sia necessario utilizzare componenti JavaScript Bootstrap (che richiedono JQuery), questa è tutta la configurazione necessaria. Ma se hai bisogno di usare modals, fisarmonica, datepicker, tooltip o qualsiasi altro componente, come possiamo usare questi componenti senza installare jQuery?
Esiste una libreria wrapper angolare per Bootstrap chiamata ngx-bootstrap che possiamo installare anche da NPM:
npm install ngx-bootstrap --save
Nota ng2-bootstrap e ngx-bootstrap sono lo stesso pacchetto. ng2-bootstrap è stato rinominato in ngx-bootstrap dopo #itsJustAngular.
Nel caso in cui desideri installare Bootstrap e ngx-bootstrap contemporaneamente quando crei il tuo progetto Angular CLI:
npm install bootstrap ngx-bootstrap --save
4.1: Aggiunta dei moduli Bootstrap richiesti in app.module.ts
Passa attraverso ngx-bootstrap e aggiungi i moduli necessari nel tuo app.module.ts. Ad esempio, supponiamo di voler utilizzare i componenti Dropdown, Tooltip 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 {}
Poiché chiamiamo il metodo .forRoot () per ogni modulo (a causa dei fornitori di moduli ngx-bootstrap), le funzionalità saranno disponibili in tutti i componenti e moduli del progetto (ambito globale).
In alternativa, se desideri organizzare il ngx-bootstrap in un modulo diverso (solo per scopi organizzativi nel caso in cui devi importare molti moduli bs e non vuoi ingombrare la tua app.module), puoi creare un modulo app-bootstrap.module.ts, importa i moduli Bootstrap (usando forRoot ()) e dichiarali anche nella sezione delle esportazioni (in modo che siano disponibili anche per altri moduli).
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 {}
Infine, non dimenticare di importare il tuo modulo bootstrap in app.module.ts.
importa {AppBootstrapModule} da "./app-bootstrap/app-bootstrap.module";
@NgModule({
imports: [BrowserModule, AppBootstrapModule],
// ...
})
export class AppModule {}
ngx-bootstrap funziona con Bootstrap 3 e 4. E ho anche fatto alcuni test e la maggior parte delle funzionalità funziona anche con Bootstrap 2.x (sì, ho ancora del codice legacy da mantenere).
Spero che questo aiuti qualcuno!
