Angular7 で Web アプリを作ろう - Angular Material

今日すること

こんにちは、ふるてつです。
GWも中盤です。
今回のテーマもAngular Materialにしました。
Angular Materialを使い始めたので、リファレンスを交えて、これまでに使用したコンポーネントについて少し書いてみようかと思います。
Angular Materialのリファレンスはこちらです。
https://material.angular.io/

Layout関連

Layout関連では<mat-grid-list>と<mat-card>を使いました。

<mat-grid-list>

<mat-grid-list>ですがcolsとrowHeightを設定します。
2項目しか設定できないところを見るとBootstrapほど自由にグリッドを調整できるわけではなさそうです。
今回わたしは要素を整列するためcol="1"にして、行間を指定するためrowHeight="10rem"などにして使ってます。
中の要素はそれぞれ<mat-grid-tile>の中に記述します。

<mat-grid-list>の使用例

<div id="welcome">
  <mat-grid-list cols="1" rowHeight="10rem">
    <mat-grid-tile>
      <h1 translate>welcomeScreen.title</h1>
    </mat-grid-tile>
    <mat-grid-tile>
      <h1 translate>welcomeScreen.systemName</h1>
    </mat-grid-tile>
    <mat-grid-tile>
      <h2 translate>welcomeScreen.comment</h2>
    </mat-grid-tile>
  </mat-grid-list>
</div>

<mat-card>

<mat-card>はタグを記述するだけで使用できます。
デフォルトで背景に影がつくようで、このあたりがやはり便利です。

<mat-card-header>や<mat-card-title>、<mat-card-subtitle>などmat-cardの中で、さらに使える要素があります。
今回は<mat-card-content>のみを使用しています。

Form Controls関連

Form Controls関連では<mat-form-field>、matInputを使用しました。

<mat-form-field>

<mat-form-field>は、<input>や<textarea>などの前後に設定します。
<input>のアンダーラインや、フローティングラベル、ヒントメッセージなどのスタイルを適用するためのものですので、これを書かないとMaterialらしい動きがなにもでません。

matInput

matInputは<input>タグの中に記述します。
リファレンスでは<input matInput placeholder="Favorite food" value="Sushi">のようにplaceholderとvalueの例があります。
わたしが使用した限りではもう少し設定が必要でした。

matInputの使用例

<mat-form-field class="form-field">
  <input id="signInEMailAddress" matInput type="email" formControlName="signInEMailAddress"
    placeholder="{{ 'signInScreen.eMailAddress' | translate }}">
  <mat-error *ngIf="signInEMailAddress.hasError('required')">
    {{ 'validateErrorMessage.required' | translate }}
  </mat-error>
  <mat-error *ngIf="signInEMailAddress.hasError('email')">
    {{ 'validateErrorMessage.format' | translate }}
  </mat-error>
</mat-form-field>

Data table関連

Data table関連ではmat-tableを使用しました。

mat-table

mat-tableは<table mat-table [dataSource]="dataSource">のように記述します。
"dataSource"にはtsファイルに記述した「テーブル表示用の配列」を指定します。
上記以外で新たにtsファイルに、「テーブル表示用の配列」の列名だけを格納した変数が必要でした。
こちらをmat-header-rowに設定します（Bootstrapの時にはなかった設定です）
あとはリファレンスの通りに各列を<ng-container></ng-container>で記述します。
余談になりますが、リファレンスに書かれているmat-tableのクラス設定"mat-elevation-z8"は、テーブルの背景が陰になる指定です。

mat-tableの使用例

sign-in.component.html

<div id="informations">
  <table mat-table [dataSource]="informations" class="mat-elevation-z8">
    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef style="width: 20%;">
        {{ "signInScreen.information.date" | translate }}
      </th>
      <td mat-cell *matCellDef="let element"> {{element.date}} </td>
    </ng-container>
    <ng-container matColumnDef="information">
      <th mat-header-cell *matHeaderCellDef style="width: 20%;">{{ "signInScreen.information.detail" | translate }}
      </th>
      <td mat-cell *matCellDef="let element"> {{element.information}} </td>
    </ng-container>
    <ng-container matColumnDef="detail">
      <th mat-header-cell *matHeaderCellDef>
        {{ "signInScreen.information.information" | translate }}</th>
      <td mat-cell *matCellDef="let element"> {{element.detail}} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayInformationColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayInformationColumns;"></tr>
  </table>
</div>

sign-in.component.ts

export class SignInComponent implements OnInit {

  // お知らせ欄の変数
  informations: Information[];
  displayInformationColumns: string[] = ['date', 'information', 'detail'];

  constructor(
    …
  ) { }

  ngOnInit() {
    …
  }
}

information.ts

export class Information {
  date: string;
  information: string;
  detail: string;
}

今日の感想

今日はAngular Materialのコンポーネントについてでした。
始めて約1日で使用したものを書いた感じです。
これから先まだまだ出てきそうですが、その時はまた記事にしていきたいと思います。

では、今日もお疲れ様でした。