Angular Material の導入手順! Webページにマテリアルデザインを導入しよう

2021年12月20日月曜日

Angular

t f B! P L

enter image description here

Angular Material は、Googleがスマートフォンアプリなど標準デザインとして提唱するマテリアルデザインの、Angular用コンポーネント集です。 Angular Material を導入することで、マテリアルデザインに対応したUI やエフェクトなどを、Web アプリケーションに簡単に適用できます。

スポンサーリンク

プロジェクトに Angular Material を導入する

Angular CLI 等で、Angular のプロジェクトが作成されている前提とする。

まず、Angular のプロジェクトが作成されているパスに移動する。

cd path/to/angular_project

以下のコマンドで、Angular Material を追加する。

ng add @angular/material

対話形式で3つ質問されるので、それぞれ回答する。

1つ目はテーマの選択だ。任意の配色テーマを選択しよう。

? Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys)
❯ Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ] 
  Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ] 
  Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ] 
  Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ] 

2つ目は タイポグラフィの設定だ。

 Set up global Angular Material typography styles? 

公式では、タイポグラフィの設定について、以下かのように書かれている。

タイポグラフィは、テキストを読みやすく、読みやすく、表示時に魅力的にするためにタイプを配置する方法です。Angular Materialのテーマシステムは、ライブラリのコンポーネントのタイポグラフィ設定のカスタマイズをサポートしています。さらに、Angular Materialは、独自のアプリケーションの要素にタイポグラフィスタイルを適用するためのAPIを提供します。


3つ目はアニメーションの設定だ。アニメーションを有効にする場合は Y を選択しよう。

Set up browser animations for Angular Material?

スポンサーリンク

Angular Material を使ってみる

インストールが完了したら、さっそく Angular Material のコンポーネントを使用してみよう。

app.module.ts にスライダーコンポートの設定を追加する。

import { MatSliderModule } from  '@angular/material/slider';

  @NgModule({
  ・・・
  imports: [
    MatSliderModule
  ],
  ・・・

スライダーコンポーネントの配置

次にスライダーコンポーネントを配置する。任意の画面に以下のタグを追加する。

<mat-slider min="1"  max="100"  step="1"  value="50"></mat-slider>

動作確認

ここまで出来たら、ng serve で起動して動きを確かめてみよう。以下のようにスライダーが表示されれば OKだ。

enter image description here

material.module.ts を作る

前の例では、アプリで使用する Angular Material のコンポーネントをapp.module.ts で宣言していたが、一般的には material.module.ts というファイルを作成し、そこで 使用するコンポーネントを列挙していき、app.module.ts は極力汚さない。

material.module.ts をコマンドで作成

まず、以下のコマンドでモジュールのテンプレートを作成する。
ファイルは、 app/material/material.module.ts に作成される。

ng g m material --module=app

material.module.ts は、最初はこんな感じなっている。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class MaterialModule { }

CommonModule は基本は使わないので消して、必要なコンポーネントを importsexports に追記してきく。(以下はスライダーコンポーネントを追加した例)

import { NgModule } from '@angular/core';
import { MatSliderModule } from '@angular/material/slider';

@NgModule({
  imports: [
    MatSliderModule,
  ],
  exports: [
    MatSliderModule,
  ]
})
export class MaterialModule { }

Angular Material のコンポーネントをすべてインポートする場合は、material.module.ts のようにすればいい。(ただし、あまり推奨しない)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Material Form Controls
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
// Material Navigation
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
// Material Layout
import { MatCardModule } from '@angular/material/card';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatListModule } from '@angular/material/list';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTreeModule } from '@angular/material/tree';
// Material Buttons & Indicators
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatBadgeModule } from '@angular/material/badge';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatRippleModule } from '@angular/material/core';
// Material Popups & Modals
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
// Material Data tables
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatAutocompleteModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatInputModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatCardModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatListModule,
    MatStepperModule,
    MatTabsModule,
    MatTreeModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatBadgeModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatRippleModule,
    MatBottomSheetModule,
    MatDialogModule,
    MatSnackBarModule,
    MatTooltipModule,
    MatPaginatorModule,
    MatSortModule,
    MatTableModule
  ],
  exports: [
    MatAutocompleteModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatInputModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatCardModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatListModule,
    MatStepperModule,
    MatTabsModule,
    MatTreeModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatBadgeModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatRippleModule,
    MatBottomSheetModule,
    MatDialogModule,
    MatSnackBarModule,
    MatTooltipModule,
    MatPaginatorModule,
    MatSortModule,
    MatTableModule
  ]
})
export class MaterialModule { }
スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

QooQ