Angular Material 基礎

之後要改 Angular Material 是 Angular 官方的 UI 元件庫，提供了完整的 Material Design 實現。

安裝與基本設定

ng add @angular/material

安裝過程會詢問：

• 選擇主題（如 magenta-violet）⇒ 之後能改

• 是否設置 Typography ⇒ y

• 是否設置 Animations ⇒ y

主題配置

在 angular.json 中設定：

"styles": [
  "@angular/material/prebuilt-themes/.css",
  "src/styles.css"
]

內建主題選項：

• Rose & Red

• Azure & Blue

• Magenta & Violet

• Cyan & Orange

使用元件

在 standalone component 中 import：

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';

@Component({
  standalone: true,
  imports: [MatToolbarModule, MatButtonModule]
})

用在 HTML 中：

<nav>
  <mat-toolbar color="primary">
    <span class="title">Evelyn Buddy Program</span>
    <span class="spacer"></span>
    <a mat-button routerLink="/tasks">Tasks</a>
    <a mat-button routerLink="/heroes">Heroes</a>
    <a mat-button routerLink="/prac-mrt">MRT</a>
  </mat-toolbar>
</nav>