Angular AngularMaterialのDialogを使う

こんにちは。レモンティーです。

今回はAngularMaterialのDialogを使います。

公式はコチラ
Angular Material


AngularMaterialのDialogでは、まずDialogのコンポーネントをつくり
それを呼び出し時に指定して使います。

さっそく見ていきます。

準備

・AngularMaterialのインストール
・MatDialogModuleのインポート
をします。

Dialogのコンポーネント作成

型の恩恵を受けたい場合は表示するデータのinterfaceを定義します
dialogData.ts

export interface DialogData{
    title:string;
    message:string;
}

新しいコンポーネントtestDialogを作り、App.module.tsにentryComponents:[]をつくって入れます。

@NgModule({
  declarations: [~~],
  imports: [~~],
  providers: [~~],
  entryComponents:[
    testDialogComponent,
  ],
  bootstrap: [AppComponent]
})

それから次のようにします。

testDialog.component.ts
必要なものをインポートし、コンストラクターを↓のように変えます。

import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { DialogData } from 'dialogDataのpath';
constructor(
    public dialogRef:MatDialogRef<testDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data:DialogData, 
  ) { }

testDialog.component.html

<h2 mat-dialog-title>{{data.title}}</h2>
<mat-dialog-content>
  {{data.message}}
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close>OK</button>
</mat-dialog-actions>

このままだとボタンを押した時にただ閉じるだけですが

<button mat-button [mat-dialog-close]="true">OK</button>

のようにするとそのボタンが押されたときに値を受け取ることができます(後述)


呼び出し

呼び出し側ではMatDialogのopenメソッドを使います。

まずインポートしてDI

import { MatDialog } from '@angular/material/dialog';
import { testDialogComponent } from 'path';
constructor(private dialog:MatDialog) { }

そして表示したい場所でopen

this.dialog.open(testDialogComponent,{
      width:'300px',
      data:{title:"エラー",message:"ログインしてください"}
 });

結果をうけとりたい場合は↓のようにします。

let dialogRef = this.dialog.open(SelectDialogComponent,{
      width:'300px',
      data:{title:"~の選択",message:"えらんでください",options:[{name:"い",value:0},{name:"ろ",value:1},{name:"は",value:2}]},
 });

dialogRef.afterClosed().subscribe(res => {
      switch(res){ ~~ }
});

optionsとかは必要に応じてdialogDataに定義します。
(この例ではDialog側のテンプレートで*ngFor)



今回はこれでおしまいです。
www.sawalemontea.com