Angular９とFirebaseでブログを作ってみる２（Angular Materialを導入してみる）

[前回](https://qiita.com/teracy55/items/bc35bb21f98d3d493f9f)に引き続き、今回は画面を作っていこうかと思います。

# 使用するフレームワーク

[Angular Material](https://material.angular.io/)


# Angular Materialの導入

[公式の手順](https://material.angular.io/guide/getting-started)に従って導入していきます。


## インストール

以下のコマンドを実行します
※Angular Materialの9系はまだ本リリースされていないため、`@next`で9系をインストールします

```
ng add @angular/material@next

```

なぜか`@angular/cdk`が8系だったので、個別にアップデートします

```
npm install @angular/cdk@9.0.0-rc.8

```




# 画面の構築


## ヘッダを追加

- ヘッダモジュールを作成します
    - Angular Materialの[Toolbar](https://material.angular.io/components/toolbar/api)をインポートします
    - exportsでHeaderComponentを使えるようにします

```src/app/shared/header/header.module.ts
import { NgModule } from '@angular/core';
import { HeaderComponent } from './header.component';
import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({
  declarations: [
    HeaderComponent,
  ],
  imports: [
    MatToolbarModule,
  ],
  exports: [
    HeaderComponent,
  ]
})
export class HeaderModule { }
```

- コンポーネントはとりあえずシンプルにしておきます

```src/app/shared/header/header.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {}
```

- ヘッダのHTMLを書きます
    - とりあえずタイトルだけのシンプルなものにします

```src/app/shared/header/header.component.html
<mat-toolbar>
    <span>てらしー　ブログ</span>
</mat-toolbar>
```

※scssファイルは空で置いておきます


## TOPページの作成

- TOPページ用のモジュールを作成します

```src/app/top/top.module.ts
import { NgModule } from '@angular/core';
import { TopComponent } from './top.component';

@NgModule({
  declarations: [
    TopComponent
  ],
})
export class TopModule { }
```

- コンポーネントはとりあえずシンプルにしておきます

```src/app/top/top.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-top',
  templateUrl: './top.component.html',
  styleUrls: ['./top.component.scss']
})
export class TopComponent {
}
```

- HTMLもとりあえずシンプルにしておきます

```src/app/top/top.component.html
ようこそ
```

## ルーティングの設定

- AppModuleで`HeaderModule`と`TopModule`をインポートします
    - 方針として、画面や部品単位でモジュール化することでAppModuleを汚さないようにします。
    - ここでいろいろインポートしてしまうと、ビルド後のmain.jsのサイズが大きくなってしまい、初期起動が遅くなります

```src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HeaderModule } from './shared/header/header.module';
import { TopModule } from './top/top.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,

    HeaderModule,
    TopModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

- ルーティングファイルにルートパスの場合にTopComponentを表示するようにします

```src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TopComponent } from './top/top.component';


const routes: Routes = [
  { path: '', component: TopComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
```

- app.component.htmlを修正します
    - `app-header`でHeaderComponentを表示します
    - `<router-outlet></router-outlet>`でルーティングによるコンテンツの出し分けを行います

```src/app/app.component.html
<app-header></app-header>
<router-outlet></router-outlet>
```


# 画面の確認

以下のような画面が出来上がりました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/d74d4e70-ac1a-8988-c196-0c445e08001c.png)


# まとめ

これで画面を作る準備ができました！
次回はTOPページをそれっぽくしていきます！！

（追記）
[Angular９とFirebaseでブログを作ってみる３（AngularからFirebaseを見れるようにして、TOP画面にFirebase Storage上の画像を表示してみる）](https://qiita.com/teracy55/items/ac9f83c1fcac589b876b)