[Angular][18] Membuat Website Statis dengan Bootstrap 4 (Part 1)

Tuesday, 09 Jun 2020 | By Riza

Image Load

Hello world,

Kali ini saya mencoba membuat website statis menggunakan Angular dan Bootstrap 4 untuk desain websitenya. Untuk pembahan angular kali ini langsung masuk ke studi kasus karena contoh-contoh penggunaan angular sebagian sudah saya bahas sebelumnya yang menggunakan versi 7 yang sebagian besar sepertinya sama. Lalu kenapa harus bootstrap? Karena mudah dan yang memang biasa saya pakai.

Oke langsung saja masuk ke dalam contoh  kali ini. Sebelumnya (di sini) saya sudah buat projectnya dengan nama contohapp yang tinggal kita lanjutkan saja kali ini.

Menambahkan Bootstrap 4

Ada beberapa cara untuk menambahkan bootstrap pada project angular kita yaitu dengan menambahkan pada angular.json, CLI dengan menjalankan script berikut pada proyek kita.

ng add @ng-bootstrap/ng-bootstrap

Pada tahap ini maka akan otomatis akan ada perubahan pada angular.json dan app.module.ts seperti berikut.

import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; . . .
@NgModule({ . .
  imports: [
    BrowserModule,
    NgbModule
  ], . .
})


"builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/mywebsite",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": []
          },

Pada tahap ini kita tinggal pasang-pasang saja komponen dari bootstrap 4.


Selamat mencoba :)