AngularMaterial2入門

投稿日: 2022-04-20 2022-04-20
タグ: Angular

Angular Material 2は、マテリアルデザインコンポーネントをAngular2+アプリにもたらします。このプロジェクトの目標は、モバイルおよびデスクトップ向けのマテリアルデザインインターフェイスを非常に簡単に構築できるように、コンポーネントの完全な配列を構築することです。

AngularMaterialの最新リリースはAngular4+に依存しています

AngularMaterial2の使用を開始する方法は次のとおりです。

1. npm installangular-material＆hammerjs

まず、次のコマンドを使用して、プロジェクトにAngular Material、Angularアニメーション、およびHammer.jsをインストールします。

npm install --save @angular/material @angular/animations @angular/cdk

npm install --save hammerjs

Hammer.js はオプションの依存関係であり、いくつかのコンポーネントのタッチサポートに役立ちます。

2. angle-cli.json

Hammer.js を使用することにし、 Angle CLI でプロジェクトを開始した場合は、angle-cli.jsonファイルを次のように変更します。 Hammer.jsライブラリを追加します。 Json *“ scripts” *配列を探し、hammer.jsに次のパスを追加します。

angle-cli.json

"scripts": [
  "../node_modules/hammerjs/hammer.min.js"
],

angle-cli.jsonへの変更を有効にするには、ローカルサーバーを再起動する必要がある場合があります。

3. カスタムマテリアルモジュール

Angular Material 2 Beta 3より前は、コンポーネントを利用可能にするためにアプリモジュールにインポートできるグローバルMaterialModuleがありました。その欠点は、ツリーシェーキングが未使用のコードをすべて削除するほど効率的ではないことです。

したがって、 MaterialModule は非推奨になり、必要なコンポーネントのみをインポートおよびエクスポートするプロジェクト固有のカスタムマテリアルモジュールを定義できるようになりました。モジュールは次のようになります。

Material.module.ts

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

import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ]
})
export class MaterialModule {}

次に、このモジュールをルートアプリモジュールにインポートします。

4. アプリモジュールにAngularMaterialを追加する

MaterialModuleをインポートし、インポートに追加します。また、モジュール内のアニメーションに必要なものをインポートする必要があります。アプリモジュール（例： app.module.ts ）は、次のようになります。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. 作成済みのテーマとマテリアルアイコンをインポートします

AngularMaterialで自動的にインストールされるビルド済みのテーマがいくつかあります。これらは色と基本的なスタイリングを設定します。利用可能なテーマは、インディゴピンク、ディープパープルアンバー、パープルグリーン、ピンクブルーグレーです。

テーマをインポートするには、次のようなものをグローバルstyles.cssファイルに追加できます。

styles.css

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

また、にアクセスすることができますマテリアルデザインアイコン名前付きアイコンを成分。それらをプロジェクトにインポートするには、これをプロジェクトのルートindex.htmlファイルのヘッドセクションに追加します。

index.html

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

6. Angular Materialの準備ができました！

これで、テンプレートで利用可能なAngularMaterialコンポーネントの使用を開始する準備が整いました。たとえば、サンプルアプリのテンプレートのマークアップは次のとおりです。

<div>
  <mat-toolbar color="primary">
    <span><mat-icon>mood</mat-icon></span>

    <span>Yay, Material in Angular 2!</span>

    <button mat-icon-button [mat-menu-trigger-for]="menu">
      <mat-icon>more_vert</mat-icon>
    </button>
  </mat-toolbar>
  <mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item>Option 1</button>
    <button mat-menu-item>Option 2</button>
  </mat-menu>

  <mat-card>
    <button mat-button>All</button>
    <button mat-raised-button>Of</button>
    <button mat-raised-button color="primary">The</button>
    <button mat-raised-button color="accent">Buttons</button>
  </mat-card>

  <span class="done">
    <button mat-fab>
      <mat-icon>check circle</mat-icon>
    </button>
  </span>
</div>

これに、グローバルstyles.cssに次のCSSのみを追加しました。

styles.css

body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

mat-card {
  max-width: 80%;
  margin: 2em auto;
  text-align: center;
}
mat-toolbar-row {
  justify-content: space-between;
}

サンプルアプリの外観は次のとおりです。

Our sample Material Design app

詳細はこちら

始めるのに役立ついくつかの投稿があります：

リソースとリンク

Angular Material 2プロジェクト： Webサイト、Githubリポジトリ。
このAngularMaterial2シンプルアプリ：アプリデモ、Githubレポジトリ。
Kara Ericksonからのこのトーク： Youtubeでのトーク、Githubリポジトリ。

getdocs

13036