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

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

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

%%{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 เองทั้งหมด
ใช้เวลามาก"]
  end
  subgraph Era2["ยุค Component Library / Material"]
    B["Angular Material
Component พร้อมใช้"]
    C["Theme + Animation
ตั้งค่าเร็ว"]
  end
  subgraph Era3["ยุค CDK / Advanced UI"]
    D["CDK
Drag Drop Overlay"]
    E["Virtual Scroll
รายการจำนวนมาก"]
  end
  A --> B --> C --> D --> E

แนวคิดสำคัญ

ตาราง 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

%%{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
แอปพลิเคชัน"] --> B["Angular Material
UI Components"]
  B --> C["Theme
สีและ Typography"]
  B --> D["Material Modules
Button Input Table"]
  B --> E["CDK
Behavior พื้นฐาน"]
  E --> F["Overlay / Drag Drop / Virtual Scroll
ฟีเจอร์ขั้นสูง"]

Code Example

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

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

// 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 {}

// 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
    });
  }
}

<!-- lesson-form.component.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>

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

กลับสัปดาห์ที่ 9