【Angular】Angular Materialでヘッダーを実装する方法【簡単】

2020年4月19日2022年9月11日

今回もAngular Materialについてみていきましょう！

Webアプリによくあるヘッダーですが、皆さんは実装の仕方はご存知でしょうか？

CSSで実装したり、Bootstrapで実装しても良いのですが、実はAngular Materialに便利なコンポーネントがあるんです！

それを使えば初心者でも簡単にヘッダーを実装することができますよ。

そんなわけで、今回はAngular Materialでヘッダーを実装する方法についてご紹介しますね。

本記事の環境は以下の通りです。

Angular CDK：8.2.3
Angular CLI：8.3.20
Angular Material：8.2.3

Angular Materialのヘッダーを実装する手順

Angular Materialでヘッダーを実装する際は、mat-toolbarを使います。

mat-toolbarという専用のタグを使用するのです。

それでは、早速ヘッダーを追加していきましょう！

app.module.ts

まずは、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 { MatToolbarModule } from '@angular/material/toolbar';
@NgModule({
declarations: [
　AppComponent
],
imports: [
　BrowserModule,
　AppRoutingModule,
　MatToolbarModule,
　BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

次にHTML側に以下を追加します。

<mat-toolbar>
  <span>This is Header.</span>
</mat-toolbar>

これで準備は完了です！

ヘッダー表示の確認

早速表示を確認してみましょう。
以下のように表示されていれば成功です。

簡単でしたね！
お疲れ様でした！

ヘッダーの行を増やす方法

さて、ヘッダーの実装方法をご紹介しましたが、実はこのヘッダーは行を増やすことができます。
ヘッダーを2重、3重にすることができるのです。

app.component.html（ヘッダー2重の場合）

<mat-toolbar>  
  <mat-toolbar-row>
    <span>First Header</span>
  </mat-toolbar-row>
  <mat-toolbar-row>
    <span>Second Header</span>
  </mat-toolbar-row>
</mat-toolbar>