Angular

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

dual-screen

今回も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>

ヘッダー2重の場合の表示確認

すると、以下のように表示されます。

ヘッダー2重

確かに2重になっていますね!

うまく使えば、メインのヘッダーとサブのヘッダーという感じに分けてデザインできそうです。

終わりに

今回はAngular Materialでヘッダーを実装する方法についてご紹介しました。

まとめ
  • Angular Materialでヘッダーを実装する際には「mat-toolbar」を使う!
  • 「mat-toolbar」は重ねることができる!

今回はここまでです。それでは。