สร้าง Web App ตรวจหวยด้วย Angular6 #2 (How to use Material Design in Angular)

  1. ขั้นตอนแรก install dependency material cdk และ animations ด้วยคำสั่งตามด้านล่างนี้เลย
npm install --save @angular/material @angular/cdk
npm install --save @angular/animations

2. เมื่อ install dependency เรียบร้อยแล้วก็ทำการ import BrowserAnimationsModule เข้าสู่ app.module.ts

3. เริ่มใช้งาน Material Design สำหรับ angular6 กันได้เลย จากตัวอย่างนี้จะลองใช้ Button ของ Material กันก่อน โดยจะต้อง import MatButtonModule มาก่อนดังภาพด้านล่าง

4. ต่อไปให้ import css ของ Material มาใน style.scss

@import "~@angular/material/prebuilt-themes/indigo-pink.css"

5. มาลองใช้งานที่ app.component.html กัน ลบ Code ออกให้หมดแล้วลองแก้เป็น Code ตามด้านล่างนี้

ผลลัพธ์ ได้แล้ว Material Design ใน angular6

6. เพิ่มเติม เราสามารถ custom css material design ใน project ของเราได้ด้วย

มาลองทำกันเลย เปลี่ยนการ import css จากด้านบนเป็นแบบด้านล่างนี้แทน

@import "~@angular/material/theming";

7. ลองดูผลลัพธ์ที่เปลี่ยนไป

8. จะเห็นว่าสีต่างๆที่สวยงามของ button ได้หายไป ให้เราแก้ไขเป็นแบบด้านล่างนี้แทน

@import "~@angular/material/theming";
@include mat-core();
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
@include angular-material-theme($candy-app-theme);

9. จริงๆแล้วแก้ไขเป็นแบบด้านบนนี้ก็โอเคแล้ว แต่เรายังไม่พอ ยังอยากปรับแต่ง font ด้วย มาทำตามนี้กันเลย ใน file index.html เพิ่ม link สำหรับ import font อื่นเข้ามาใน project เรา

<link href="https://fonts.googleapis.com/icon?family=Kanit:300,400,500" rel="stylesheet">

10. เพิ่มการ custom css เพิ่มส่วนบรรทัดที่ 3,4 และ 12–14 ตามด้านล่าง ซึ่ง material จะ provide ให้ปรับแต่ง css ผ่าน typography ได้

$custom-typography: mat-typography-config($font-family: '"Kanit", sans-serif;');
@include mat-core($custom-typography);
....
bady {
font-family: 'Kanit';
}

11. ดูผลลัพธ์กันหน้าเปลี่ยนไปเทียบกันชัดๆ

ก่อนปรับแต่ง css
ปรับแต่ง css แล้ว

ดูเพิ่มเติมได้ตามลิ้งด้านล่างนี้

Reference: https://material.angular.io/guide/getting-started

Reference: https://material.angular.io/guide/theming

Full Source Code: https://gitlab.com/angkarn9/lotto-web-app
Check out to branch lesson2