Angular × Template × 基本的なレアいアウトを設定してみた。

Goal

anguar-material-templateを参考に、Angular13に対応したシンプルなテンプレートを用意する。(上記TemplateはAngular８に対応。) Step2では、ヘッダー、フッターとサブメニューの設定を行う。

Repository

ソースコード置き場はここ

下準備編

Angular materialのインストール

まだインストールしていなかったので追加する。 ng add @angular/materialを実行し、インストールを行う。インストールしただけでは利用できないので、NG-Moduleを追加する。 NG-Moduleを追加する際は、src-app-custom-materialディレクトリに専用のモジュールを作成してそこから読み込む。

ヘッダー編

ヘッダー・フッター、サブメニューは、ShardフォルダのLayoutコンポーネントで定義する。
Layoutコンポーネントで構成することで、今後ログイン前後やロールなどでレイアウトを分けたいときに別のレイアウトコンポーネントを追加して利用することができる（と思った。）逆に、どんな場合でも表示するようなレイアウトについては、AppComponentにて定義するのが良い。
定義自体はできるだけシンプルに維持したいので、Angular materialのサンプルをそのまま利用する。

  <mat-toolbar color="primary">
    <button mat-icon-button  (click)="sidenav.toggle()">
      <mat-icon>menu</mat-icon>
    </button>
    <span>K-TEmplate</span>
    <button mat-icon-button>
      <mat-icon>favorite</mat-icon>
    </button>
    <button mat-icon-button>
      <mat-icon>share</mat-icon>
    </button>
  </mat-toolbar>

サブメニュー編

サブメニューとしてAngular materialのSidenavコンポーネントを定義する。合わせて、メインコンテンツを表示する場所についても定義を行う。
メインコンテンツは、Mat-Cardを使って領域を定義し、Cardの中でスクロールしながらコンテンツを表示するようにする。
これにより、画面全体をスクロールするような挙動を抑制し、常にヘッダーが表示されるようにする。

  <mat-sidenav-container class="app-body">
    
    <mat-sidenav #sidenav mode="side" >
      <div class="app-sidenav-section">
      <!-- Side Nav contents. implemented as other compornetn. -->
        <p>Menu 1</p>
        <p>Menu 2</p>
        <p>Menu 3</p>
      </div>
    </mat-sidenav>

    <mat-sidenav-content class="mat-sidenav-contents">
      <mat-card class="app-main-contents">
        <router-outlet></router-outlet>
      </mat-card>
    </mat-sidenav-content>  

  </mat-sidenav-container>

フッター編

常に一番下になるようにフッターを定義する。ここではコピーライトだけ表示するようにした。

  <div class="footer" >
    © 2023- kinakomotitti 
  </div>