ติดตั้ง mdbootstrap ของ Angular

สวัสดีครับ บทความนี้ผมจะมาโน๊ตวิธีการติดตั้ง mdbootstrap ใน angular กันนะครับ ซึ่งเจ้าตัว mdbootstrap มันเป็น Material Design สำหรับ Bootstrap มีให้เลือกหลากหลายว่าเราจะใช้กับ framework ไหน ในที้นี้ผมจะนำมาใช้กับ angular ครับ เราไปติดตั้งกันก่อน

ในที่นี้ผมจะทำการติดตั้งแบบ npm และทำการ config เองทั้งหมดนะครับ

ก่อนอื่นเราก็ต้องสร้างโปรเจ็ค angular ขึ้นมาก่อน ตามคำสั่ง สำหรับใครที่มีอยู่แล้วก็ใช้ได้เลย แต่ต้องแน่ใจว่า style ของโปรเจ็คเป็นแบบ scss ถ้ายังไม่ใช่ก็เปลี่ยนได้ตามคำสั่งต่อ ๆ ไปครับ

ng new your-angular-project --style=scss

จากนั้นเมื่อได้แล้ว ให้เราเข้าไปที่โปรเจ็ค แล้วรันคำสั่งเพื่อเพิ่ม mdbootstrap เข้าไปใน project

npm i angular-bootstrap-md --save

จากนั้นเราก็ไปเพิ่มโค้ดไป app.module.ts ดังนี้

import { NgModule } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';

@NgModule({
    imports: [
        MDBBootstrapModule.forRoot()
    ]
});

จากนั้นให้เราไปเช็คในไฟล์ angular.json ว่าเป็น scss แล้วหรือไม่ ตามโค้ดด้านล่าง ถ้ายังไม่ใช่ให้เปลี่ยนไปเป็น scss เสีย

"schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  }

ถ้าเราเปลี่ยน เป็น scss แล้ว ให้เราไปเปลี่ยนใน src/styles.css เป็น .scss ด้วย

จากนั้นให้เราไปเพิ่ม โค้ดใน angular.json ดังนี้

"styles": [
    "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
    "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
    "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
    "node_modules/animate.css/animate.css",
    "src/styles.scss"
],
"scripts": [
  "node_modules/chart.js/dist/Chart.js",
  "node_modules/hammerjs/hammer.min.js"
],

จากนั้นให้เรา add lib เพิ่มเติม ดังนี้

npm install -–save [email protected] @types/chart.js @types/chart.js @fortawesome/fontawesome-free hammerjs animate.css

เพียงแค่นี้เราก็สามารถรันโปรเจ็คที่มี mdbootstrap ได้แล้ว

Add a Comment

Your email address will not be published. Required fields are marked *