Angular Material 別ファイル作成（10分で完了）

マテリアル用ファイル作成

マテリアル　コンポーネントを使うために、
専用のファイルを用意します。
マテリアルには様々なコンポーネントがあり、
一つ一つインポートする必要があります。
app.module.tsに記述しても良いのですが、
ほかの用途のモジュールと混ざり、
見づらくなるので、別のファイルを作成します。
src/app/デイレクトリに、
cmaterial.module.tsを作成します。
Visual Studio Code では
　 appデイレクトリを選ぶと、ファイル作成アイコンがあります。

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

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

名称はcmaterial.module.tsとしましたが、ほかの名前でも構いません。
*.module.ts　の　[*]　を変えます。
この時、
export class　の次のCmaterialModuleも合わせて変更します。

app.module.ts変更

同じデイレクトリの、
app.module.ts　を変更します。
記入箇所は下記プログラムの①と②です。
CmaterialModuleをインポートし、
@NgModule内の、
imports: []に追加記入します。
下はapp.module.tsファイルです。

  
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
//①記入箇所
import { CmaterialModule } from './cmaterial.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
   //②記入箇所
    CmaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }  
   
  

今回は以上です。
Angular Material　がこれで使いやすくなったら成功です。