Angular UIライブラリの活用術

AngularアプリケーションのUI品質を高め、開発効率を大幅に向上させるために、UIコンポーネントライブラリの活用は不可欠です。

本章では、Googleが提供する公式UIライブラリAngular Materialを中心に、導入方法、実用的なコンポーネントの使い方（テーブル・ダイアログ・スナックバー）、さらにテーマ設定やレスポンシブ対応までを網羅的に解説します。

---

1. Angular Materialの導入

Angular Materialは、Material Designに準拠した高品質なUIコンポーネントを提供する公式ライブラリです。

■ インストール方法

ng add @angular/material

対話式プロンプトでテーマ、グローバルCSSの追加、アニメーション設定などを選択できます。

■ モジュールのインポート例

material.module.ts を作成し、必要なコンポーネントだけを集約すると保守しやすくなります。

import { NgModule } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSnackBarModule } from '@angular/material/snack-bar';<br><br>

@NgModule({
  exports: [
    MatTableModule,
    MatDialogModule,
    MatSnackBarModule
  ]
})
export class MaterialModule {}

---

2. テーブル、ダイアログ、スナックバーの実装

■ MatTable（データ表示テーブル）

HTML：

<table mat-table [dataSource]="data"> 
　　<ng-container matColumnDef="name">
　　　<th mat-header-cell *matHeaderCellDef> 名前 </th>
　　　　<td mat-cell *matCellDef="let element">{{element.name}} </td>
　　</ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

TypeScript：

data = [{ name: '山田' }, { name: '田中'}];
displayedColumns = ['name'];

■ MatDialog（モーダルダイアログ）

呼び出し側：

import { MatDialog } from '@angular/material/dialog';
constructor(private dialog: MatDialog) {}

openDialog() {
  this.dialog.open(DialogComponent);
}

ダイアログコンポーネントは entryComponents に登録（Angular v13以降は不要）。

■ MatSnackBar（トースト通知）

import { MatSnackBar } from '@angular/material/snack-bar';
constructor(private snackBar: MatSnackBar) {}

showMessage() {
  this.snackBar.open('保存しました', '閉じる', { duration: 3000 });
}

3. テーマ設定とレスポンシブ対応

■ テーマのカスタマイズ

Angular Materialでは、事前定義されたテーマを使用できます（例：indigo-pink、deeppurple-amber）。
さらに、src/styles.scssで自作テーマを定義可能です。

@use '@angular/material' as mat;
@include mat.core();

$my-theme: mat.define-light-theme((
  color: (primary: mat.define-palette(mat.$indigo-palette), accent: mat.define-palette(mat.$pink-palette))
));

@include mat.all-component-themes($my-theme);

■ レスポンシブ対応

Angular MaterialはFlex Layoutとの組み合わせでレスポンシブデザインに対応しやすくなります。

npm install @angular/flex-layout

HTML例：

<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="10px">
  <div fxFlex> 左 </div>
  <div fxFlex> 右 </div>
</div>

ウィンドウ幅がmd未満になると、縦並びになります。

まとめ

Angular Materialを導入することで、見栄えの良いUIを迅速に構築でき、品質の高いユーザー体験が実現できます。
特に、データ表示・通知・ダイアログ・テーマ設計・レスポンシブ対応といった汎用的なニーズに対応しており、開発・デザインの両面で大きなメリットがあります。