コロナに関する記事はこちら!

【Angular】Materialモジュールは外出しした方が綺麗

angularのロゴ画像

おっくソ

こんにちは、おっくソです。

Angular Materialを使う時に、コンポーネントごとにそれぞれ必要なモジュールをインポートする必要がある。

▼Angular Materialのインストールについてはこちら。
angularのロゴ画像【Angular Material】ng add @angular/materialでエラー

でも毎回app.module.tsに、ボタンだったらMatButtonModuleを追加したりしていくのか。

app.module.tsはアプリ全体のモジュール全体なので、Material系のモジュールを1つ1つを定義するのはイケてない。

Material系のモジュールは1つにまとめて、app.module.tsではそのまとめたモジュール1つをインポートするだけで済むようにしていく。

MaterialModuleを作成する

定義するMaterial系モジュールを1つにまとめるためのモジュールとして、MaterialModuleを定義する。

コマンド
ng g m material

ng generate module materialってことです。

これで新しくMaterialModuleが作られました。

ファイル名はmaterial.module.ts
MaterialModuleの画像

ファイルの中は以下のようになってるはず。
MaterialModuleファイルの初期の中身の画像

それを以下のように書き換えていきます。

MEMO
Angular9からインポートの記述の仕方が少し変わったのでご注意を。
angularのロゴ画像【Angular】インポートエラー「@angular/material/index.d.ts’ is not a module」

MaterialModuleの書き方の画像

  1. CommonModuleを削除
  2. 使いたいMaterialモジュールをインポート
  3. material配列を定義し、その中にインポートしたMaterial系モジュールを格納
  4. declarationを削除し、exportsを追加
  5. importsとexportsに、material配列を定義
コード
import { NgModule } from '@angular/core';
import {
  MatButtonModule,
  MatToolbarModule,
  MatSidenavModule,
  MatMenuModule
} from '@angular/material';

const material = [
  MatButtonModule,
  MatToolbarModule,
  MatSidenavModule,
  MatMenuModule
];

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

app.module.tsにMaterialModuleを定義する

MaterialModuleの準備はできたので、それをapp.module.tsに定義していきます。
app.module.tsでのMaterialModuleの定義の画像

importsに追加するだけです。

これでMaterialModuleに定義したMaterial系モジュールを使うことができます。

Material系のモジュールを追加したい時

そのときは、MaterialModuleに追加していけばOKです。

MaterialModuleへの追加方法の画像

  1. インポートに追加
  2. material配列に追加

これでapp.module.tsがきれいに保たれます。

参考動画

ちなみに今回のMaterialモジュールの外出しについては、以下の動画を観て「めちゃいい!」と思ったので、記事にしました。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です