Day13-Angular Material: Table
Day14-Angular Material: DatePicker 日期選擇器
Day15-Angular Material: Select 下拉選單
Day16-Angular Material: Checkbox
Day17-Angular Material: Dialog 彈出視窗

Angular Material

官方中文網站

簡介

Angular Material 是由 Google 開發的 UI 元件庫，目標是讓 Angular 開發人員用有結構的方式來進行開發。

包括了常用的元件像是：表格Table、表單欄位Form、檢查框CheckBox、日期選擇器Date Picker 等…，同時這些元件必須遵守 Material Design 的設計標準。

Material Design 是由 Google 推出的設計系統，為開發設計人員提供設計規範，從配色、陰影、與使用者互動方式等…設定一個準則，開發者就較容易設計出清楚明確的使用者介面(UI)，打造更好的使用者經驗(UX)。

Angular Material UI 元件

安裝

1. 從 package.json 檢查本機是否有安裝，若無使用則輸入指令碼安裝。

   ng add @angular/material
   

   ng add 和 npm install 皆為安裝與配置 Angular 套件的命令，差異是在：
   ng add → 安裝互相對應的依賴項，且自動修改配置文件（如 app.module.ts 和 angular.json 等）。
   npm install → 安裝互相對應的依賴項，但不會自動配置文件。

2. 去 app.module.ts 設定導入 MatTableModule

   import { MatTableModule } from '@angular/material/table';
   
   @NgModule({
     imports: [
       MatTableModule 
     ],
   })
   

3. **（!依個人使用習慣）**我會將需要導入的 @angular/material 的元件獨立出來成 material.module.ts，並導出。

   import { MatAutocompleteModule } from '@angular/material/autocomplete';
   import { MatSidenavModule } from '@angular/material/sidenav';
   import { MatTableModule } from '@angular/material/table';
   ...
   
   @NgModule({
     imports: [
       MatAutocompleteModule,
   	MatSidenavModule,
   	MatTableModule,
   	...
     ],
   })
   export class MaterialModule {}
   

   並在 app.module.ts 導入。

   import { MaterialModule } from './shared/material.module';
   
   @NgModule({
     imports: [
   	MaterialModule
     ],
   })
   

測試：顯示出一個元件

1. 官方網站範例

   試著載入一個「滑塊開關」，來驗證安裝有沒有成功。導入：

   import { MatSlideToggleModule } from '@angular/material/slide-toggle';
   
   @NgModule({
     imports: [
   	MatSlideToggleModule
     ],
   })
   

2. 在 html 中載入：

   <mat-slide-toggle>Slide me!</mat-slide-toggle>
   

   

   看到 Slide me! 表示成功🙂

參考來源

Angular Material 入門指南
[Angular Material完全攻略] Day 01 - 開始 & 簡介