Menambahkan Bootstrap di Angular

Walaupun di angular sudah disediakan framework css yang siap digunakan yaitu material, dengan alasan tertentu mungkin kita ingin menggunakan bootstrap. Pada tutorial ini saya akan berbagi kepada pembaca bagaimana menambahkan framework css bootstrap ke dalam aplikasi angular.

Aplikasi yang akan kita buat menggunakan versi angular 7, namun untuk pembaca yang menggunakan angular di bawahnya tetap dapat melakukan langkah yang sama dengan tutorial kali ini.

1. Buat aplikasi dengan perintah ng new app-with-bootstrap
2. Setelah aplikasi terinstall, Masuk ke dalam aplikasi, kemudian install boostrap dengan perintah npm install --save bootstrap, dengan perintah tersebut kita akan menginstall versi boostrap yang terakhir ke dalam aplikasi kita.
3. Setelah instalasi bootstrap selesai, buka file angular.json yang ada di root folder. Pada bagian

"styles": [
   "src/styles.scss"
],

tambahkan

"node_modules/bootstrap/dist/css/bootstrap.min.css",

Sehingga tampak sebagai berikut

"styles": [
   "node_modules/bootstrap/dist/css/bootstrap.min.css",
   "src/styles.scss"
],

Sekarang jalankan aplikasi anda, maka asset dari bootstrap otomatis akan bisa digunakan di dalam aplikasi anda.