reveal.js

# Angular Material UI: Component Library การใช้งานเบื้องต้น

Lesson 6 - Angular Routing, Forms และ State

**Angular Material** คือ Component Library สำหรับ Angular ที่อ้างอิงแนวคิด Material Design ช่วยให้สร้างปุ่ม ฟอร์ม ตาราง Dialog และ Notification ได้รวดเร็ว พร้อมมาตรฐานด้าน Accessibility และ Interaction

---

## Timeline/ประวัติศาสตร์

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
  subgraph Era1["ยุค CSS เอง / Custom CSS"]
    A["เขียน UI เองทั้งหมด<br/>ใช้เวลามาก"]
  end
  subgraph Era2["ยุค Component Library / Material"]
    B["Angular Material<br/>Component พร้อมใช้"]
    C["Theme + Animation<br/>ตั้งค่าเร็ว"]
  end
  subgraph Era3["ยุค CDK / Advanced UI"]
    D["CDK<br/>Drag Drop Overlay"]
    E["Virtual Scroll<br/>รายการจำนวนมาก"]
  end
  A --> B --> C --> D --> E
</pre>

---

## แนวคิดสำคัญ

- **ติดตั้ง** ด้วย `ng add @angular/material` แล้วเลือก Theme และ Animation
- **MatButtonModule** ใช้ `<button mat-raised-button color="primary">`
- **MatInputModule** ใช้ `<mat-form-field>` และ `matInput`
- **MatTableModule** ใช้ `<mat-table>` สำหรับแสดงข้อมูลตาราง
- **MatDialogModule** ใช้เปิด Dialog หรือ Modal
- **MatSnackBarModule** ใช้แสดง Toast Notification
- **CDK** หรือ Component Dev Kit มี Drag & Drop, Virtual Scroll, Overlay

---

## ตาราง Component ที่ใช้บ่อย

| Module | Component | หน้าที่ | ตัวอย่าง |
|---|---|---|---|
| `MatButtonModule` | Button | ปุ่มมาตรฐาน | `mat-raised-button` |
| `MatInputModule` | Input | ช่องกรอกข้อมูล | `matInput` |
| `MatTableModule` | Table | ตารางข้อมูล | `mat-table` |
| `MatDialogModule` | Dialog | Modal | confirm form |
| `MatSnackBarModule` | Snack Bar | Toast | save success |
| `DragDropModule` | CDK Drag Drop | ลากวาง | reorder list |

---

## Mermaid Diagram: Material UI Stack

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart TD
  A["Angular App<br/>แอปพลิเคชัน"] --> B["Angular Material<br/>UI Components"]
  B --> C["Theme<br/>สีและ Typography"]
  B --> D["Material Modules<br/>Button Input Table"]
  B --> E["CDK<br/>Behavior พื้นฐาน"]
  E --> F["Overlay / Drag Drop / Virtual Scroll<br/>ฟีเจอร์ขั้นสูง"]
</pre>

---

## Code Example

```powershell
# ติดตั้ง Angular Material
ng add @angular/material

# ตัวอย่างการใช้งาน:
# เลือก Theme, เปิด Typography และ Animation ตาม wizard
```

```typescript
// material.module.ts
// รวม Material modules ที่ใช้บ่อยไว้ในไฟล์เดียว
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSnackBarModule } from '@angular/material/snack-bar';

@NgModule({
  exports: [
    MatButtonModule,
    MatInputModule,
    MatFormFieldModule,
    MatSnackBarModule
  ]
})
export class MaterialModule {}
```

```typescript
// lesson-form.component.ts
// ใช้ MatSnackBar แสดงผลหลังบันทึก
import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-lesson-form',
  templateUrl: './lesson-form.component.html'
})
export class LessonFormComponent {
  title = '';

constructor(private snackBar: MatSnackBar) {}

save(): void {
    this.snackBar.open('บันทึกบทเรียนแล้ว', 'ปิด', {
      duration: 3000
    });
  }
}
```

```html

<mat-form-field appearance="outline">
  <mat-label>ชื่อบทเรียน</mat-label>
  <input matInput [(ngModel)]="title">
</mat-form-field>

<button mat-raised-button color="primary" (click)="save()">
  บันทึก
</button>
```

---

## กิจกรรมท้ายบท

- ติดตั้ง Angular Material
- สร้างฟอร์มด้วย `mat-form-field` และ `matInput`
- เพิ่มปุ่ม `mat-raised-button`
- แสดง Snack Bar หลังบันทึกสำเร็จ

---

## End

<a href="/web-programming/09-angular-routing-forms/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>