เนื้อหาอัพเดตให้รองรับ Angular 2 และ 4 เป็นต้นไป ใช้ได้เลย
ในคอร์สอบรม Angular Essential Training และ MEAN Stack มีการใช้งาน Bootstrap และ Fontawesome กับโปรเจคเว็บแอพพลิเคชั่นของเราด้วย เลยขอมาแชร์เอาไว้ที่นี่ เผื่อมีใครกำลังหาวิธีอยู่นะครับ
ในที่นี้โปรเจคที่ใช้สร้างจาก Angular CLI เวอร์ชั่นล่าสุด แต่หากใครสร้างโปรเจคขึ้นมาด้วยตัวเองก็สามารถใช้งานได้เหมือนกันครับ
วิธีติดตั้ง Bootstrap และ Fontawesome ลงในโปรเจค Angular
ในที่นี้เราสามารถรันคำสั่งติดตั้ง Node module โดยตรงในโปรเจคของเราได้เลย โดยรันคำสั่งใน Command Prompt และ Powershell บน Windows หรือ Terminal ของ macOS
npm install --save bootstrap font-awesome
เสร็จแล้วก็ ให้เปิดไฟล์ src\style.css ที่ปกติเราจะประกาศ CSS Rule แบบ Global ขึ้นมา และสั่ง import ไฟล์ CSS ของ Bootstrap และ Fontawesome
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.css";
เสร็จแล้วให้บันทึกไฟล์ และลองเรียกใช้ CSS class ของ Bootstrap ใน Angular Component ดู
<button class="btn btn-default">Sign in</button>
บันทึกไฟล์ และลองรันไฟล์ HTML ของเว็บเราขึ้นมาดู (ถ้าใช้ Angular CLI ก็รันคำสั่ง ng serve ได้เลย) เราก็จะเห็นปุ่มของเราสวยงาม สไตล์ Bootstrap แล้วล่ะครับ