Angular MaterialのDiaglogを使った時のまとめ

## 概要
Angularでちょっとしたアラートでダイアログを表示させたいので、Angular MaterialのDiaglogを使ってました。Angular MaterialについてはQiitaや各種ブログで取り上げられているものの、仕様が変わったりなどして、Diaglogを使ったときに上手く動かず苦労しました。ので、備忘をかねて本ページで参考サイトのリンクやサンプルソースをのせます。

## Angular Materialのインストール
@donuziumさんの[Angular Materialのインストールから使い始めまで](https://qiita.com/donuzium/items/c9af982b02a9c4a2aaa8)にて分かりやすく解説されています。一点注意すべきは、Angular本体のメジャーバージョンとAngular Materialのバージョンが異なる場合、ビルドで失敗する可能性がるので使用しているAngular本体のバージョンに合わせてインストールしましょう。

## Diaglogを使用にあたっての参考サイト
まずは[Dialog | Angular Material](https://material.angular.io/components/dialog)を読みましょう。@TsuyoshiUshio@githubさんの[Angular 4 マテリアルデザインのダイアログ](https://qiita.com/TsuyoshiUshio@github/items/a5bc75817e39579227ad)の記事に解説がされています。
また、こちらのブログ記事[【Angular】10分で分かるAngularMaterialのDialogの使い方](http://issier.com/archives/240)のサンプルソースもイメージがつきやすいと思います。なお2018年5月現在、コンポーネント名が「mat」始まりになっていますので注意してください。

## サンプルソース
上記参考サイトの内容を少し編集したものをのせます。Angular5で動作すること確認しています。

###Moduleの設定

```test.module.ts
import { NgModule }      from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material';
import { AlertDialogComponent }  from './alert-dialog.component';

@NgModule({
  imports:[ CommonModule ,FormsModule , BrowserAnimationsModule , MatDialogModule ],
  declarations: [ AlertDialogComponent ],
  entryComponents: [ AlertDialogComponent ]
})
export class TestModule { }
```
###ダイアログの表示用コンポーネント

```alert-dialog.component.ts
import { Component, OnInit, Inject} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';

@Component({
  selector:'app-alert-dialog',
  template: `
   <h2 mat-dialog-title>{{data.title}}</h2>
        <mat-dialog-content>
           {{data.message}}
        </mat-dialog-content>
    <mat-dialog-actions>
        <table cellspacing="15">
           <tr>
             <td>
                 <button mat-raised-button (click)="onClickOkButton()">OK</button>
             </td>
             <td>
                 <button mat-raised-button mat-dialog-close="cancel">キャンセル</button>
             </td>
           </tr>
        </table>

    </mat-dialog-actions>
  `
})
export class AlertDialogComponent  { 
    
    constructor(
        @Inject(MAT_DIALOG_DATA) public data : any,
        public matDialogRef : MatDialogRef<AlertDialogComponent>) { }
    
    
    onClickOkButton():void {
        // OKボタンが押されたときは「OK」を呼び出し元に渡す。
        this.matDialogRef.close('OK');
    }

}
```
###ダイアログの呼び出し元コンポーネント
```alert-test.component.ts
import { Component , OnInit} from '@angular/core';
import { MatDialog} from '@angular/material';
import { AlertDialogComponent } from './alert-dialog.component';

@Component({
  selector:'app-alert-test',
  template: `
   <input type ="button" (click)="onDelete($event)" value ="削除" />{{this.alertDialogResult}}
  `
})
export class AlertTestComponent  { 
    // アラートの押されたボタンの結果格納用
    alertDialogResult = '';

    constructor( public matDialog : MatDialog){ }
        
    // 削除ボタンが押されたとき
    onDelete(event:string){
      // ダイアログの表示
      let dialog = this.matDialog.open(AlertDialogComponent, {
                  'data' : {'title': '削除確認' , 'message' : '削除しても大丈夫ですか？'},
                  'height' : '300px',
                  'width' : '500px',
                  'disableClose' : false
                 });
      
      // ボタンの結果を取得
      dialog.afterClosed().subscribe( (result:any) => {
            // 結果をセット
            this.alertDialogResult = result;
      });
    }

}
```
サンプルはこんなかんじで表示されます。
<img width="183" alt="キャプチャ.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/32098/61354cdb-b3b2-409a-6989-60897983cff5.png">

削除ボタンを押すとダイアログが表示されます。
<img width="377" alt="キャプチャ.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/32098/50f99abe-9b89-4d35-3ec4-904bb5c3bee9.png">

OKボタンを押すと、パラメータが元の画面へ反映されます。
<img width="125" alt="キャプチャ.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/32098/4d000fae-eccc-b717-b69a-cf81de08cca9.png">