Untuk langkah-langkah detail di bawah ini dan contoh kerja, Anda dapat mengunjungi
https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/
Langkah-langkah yang sangat detail dengan penjelasan yang tepat.
Langkah-langkah:
Menginstal Bootstrap dari NPM
Selanjutnya, kita perlu menginstal Bootstrap. Ubah direktori ke proyek yang kita buat (cd angular-bootstrap-example) dan jalankan perintah berikut:
Untuk Bootstrap 3:
npm install bootstrap --save
Untuk Bootstrap 4 (saat ini dalam versi beta):
npm install bootstrap@next --save
ATAU
Alternatif: CSS Bootstrap Lokal
Sebagai alternatif, Anda juga dapat mengunduh CSS Bootstrap dan menambahkannya secara lokal ke proyek Anda. Saya mendownload Bootstrap dari situs web dan membuat gaya folder (setingkat dengan styles.css):
Catatan:
Jangan letakkan file CSS lokal Anda di bawah folder aset. Saat kita melakukan produksi build dengan Angular CLI, file CSS yang dideklarasikan di .angular-cli.json akan dikecilkan dan semua gaya akan digabungkan menjadi satu styles.css. Folder aset disalin ke folder dist selama proses pembuatan (kode CSS akan diduplikasi). Tempatkan hanya file CSS lokal Anda di bawah aset jika Anda mengimpornya langsung di index.html.
Mengimpor CSS
1. Kami memiliki dua opsi untuk mengimpor CSS dari Bootstrap yang diinstal dari NPM:
teks kuat 1: Konfigurasi .angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
2: Impor langsung ke src / style.css atau src / style.scss:
@import '~bootstrap/dist/css/bootstrap.min.css';
Saya pribadi lebih suka mengimpor semua gaya saya di src / style.css karena sudah dideklarasikan di .angular-cli.json.
3.1 Alternatif: CSS Bootstrap Lokal
Jika Anda menambahkan file CSS Bootstrap secara lokal, cukup impor ke .angular-cli.json
"styles": [
"styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
"styles.scss"
],
atau
src / style.css
@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';
4: Komponen JavaScript Bootstrap dengan ngx-bootstrap (Opsi 1)
Jika Anda tidak perlu menggunakan komponen JavaScript Bootstrap (yang memerlukan JQuery), ini semua penyiapan yang Anda butuhkan. Tetapi jika Anda perlu menggunakan modals, accordion, datepicker, tooltips, atau komponen lainnya, bagaimana kita dapat menggunakan komponen ini tanpa menginstal jQuery?
Ada perpustakaan pembungkus Angular untuk Bootstrap yang disebut ngx-bootstrap yang juga dapat kita instal dari NPM:
npm install ngx-bootstrap --save
Catatan ng2-bootstrap dan ngx-bootstrap adalah paket yang sama. ng2-bootstrap diganti namanya menjadi ngx-bootstrap setelah #itsJustAngular.
Jika Anda ingin menginstal Bootstrap dan ngx-bootstrap secara bersamaan saat Anda membuat proyek CLI Angular:
npm install bootstrap ngx-bootstrap --save
4.1: Menambahkan modul Bootstrap yang diperlukan di app.module.ts
Buka ngx-bootstrap dan tambahkan modul yang diperlukan di app.module.ts Anda. Misalnya, kita ingin menggunakan komponen Dropdown, Tooltip dan 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 {}
Karena kita memanggil metode .forRoot () untuk setiap modul (karena penyedia modul ngx-bootstrap), fungsionalitas tersebut akan tersedia di semua komponen dan modul proyek Anda (cakupan global).
Sebagai alternatif, jika Anda ingin mengatur ngx-bootstrap dalam modul yang berbeda (hanya untuk tujuan organisasi jika Anda perlu mengimpor banyak modul bs dan tidak ingin app.module Anda berantakan), Anda dapat membuat modul app-bootstrap.module.ts, impor modul Bootstrap (menggunakan forRoot ()) dan juga mendeklarasikannya di bagian ekspor (sehingga modul tersebut juga tersedia untuk modul lain).
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 {}
Terakhir, jangan lupa untuk mengimpor modul bootstrap Anda di app.module.ts.
impor {AppBootstrapModule} dari './app-bootstrap/app-bootstrap.module';
@NgModule({
imports: [BrowserModule, AppBootstrapModule],
// ...
})
export class AppModule {}
ngx-bootstrap bekerja dengan Bootstrap 3 dan 4. Dan saya juga melakukan beberapa tes dan sebagian besar fungsionalitas juga bekerja dengan Bootstrap 2.x (ya, saya masih memiliki beberapa kode warisan untuk dipertahankan).
Semoga ini membantu seseorang!
