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

記事内に広告を含みます

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

おっくそ

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

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

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

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

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

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

目次非表示

MaterialModuleを作成する
app.module.tsにMaterialModuleを定義する
Material系のモジュールを追加したい時
参考動画

目次へ

MaterialModuleを作成する

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

コマンド

ng g m material

ng generate module materialってことです。

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

ファイル名はmaterial.module.ts。

ファイルの中は以下のようになってるはず。

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

MEMO

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

CommonModuleを削除
使いたいMaterialモジュールをインポート
material配列を定義し、その中にインポートしたMaterial系モジュールを格納
declarationを削除し、exportsを追加
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 { }