Angular

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

  /

今回も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」は重ねることができる！

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

Angular Material Design
RELATED POST