Angular 6 + Bootstrap 4
Mulai serius: Mari kita buat front-end yang kuat untuk proyek belajar-angular kita ini dengan menjadikan Bootstrap 4 sebagai pondasinya.
Instalasi Bootstrap 4 via NPM
Buka terminal, arahkan ke dalam folder proyek, lalu jalankan perintah berikut untuk menginstal Bootsrap 4:
npm install bootstrap
Jika Anda menemui pesan WARN seperti diatas jangan panik, itu terjadi karena Bootstrap 4 memiliki dependency dengan libraries lain yaitu jQuery dan popper.js
Install kedua libraries tersebut menggunakan cara yang sama seperti berikut:
Untuk apa “npm install” ?
Kita bisa cek apakah ketiga libraries tersebut sudah ada dalam aplikasi kita dengan mencarinya dalam folder /node_modules:
Perintah npm install di atas selain bekerja men-download libraries yang kita butuhkan, juga secara otomatis menuliskannya dalam file package.json agar kita ingat (atau orang lain tahu) bahwa proyek yang bersangkutan membutuhkan libraries tambahan.
Menggunakan Bootstrap 4 pada Angular 6
Buka file angular.json yang ada pada root proyek.
Cari key styles dalam keys architect > build > option, lalu tambahkan value berupa path menuju Bootstrap’s CSS seperti berikut:
Jalankan “ng serve”, lalu buka browser. Anda akan dapatkan tampilan yang sama seperti proyek default Angular, namun dengan styling yang berbeda.
Untuk lebih meyakinkan diri bahwa proyek Angular ini sudah benar-benar menggunakan Bootstrap 4 styling, silahkan buka Chrome DevTool > window Elements:
Buka bagian <head>, lalu buka <style> yang pertama, maka Anda akan dapati bahwa styling (CSS) dari Bootstrap 4 sudah masuk ke dalam proyek Angular ini.
Atribusi Anda berupa clapping, sharing, ngasih komentar, dan following blog ini dapat menimbulkan efek samping berupa semangat menulis yang menggebu bagi saya
