AngularMaterialを使ったDialog(モーダル画面)の実装

はじめに

Angularを使った業務アプリの環境 でも書いているように、Angular Materialは無料のUI・UXライブラリーで非常に便利。そのライブラリーを使ったモーダル画面の実装方法をメモします。

実装方法

公式ドキュメントを見ればそれで終わるのだが、要点を記載。

• app.module.tsにて、dailogコンポーネント(この例ではAppDialogComponent)を、declarations:[]パラメータの他に、entryComponents:[]パラメータに設定。

app.module.ts

@NgModule({
  declarations: [
    AppComponent, AppDialogComponent
  ],
  imports: [
　　　　　　　　・・・ 
  ],
  entryComponents: [
    AppDialogComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 呼び出し元のコンストラクターで、MatDialogサービスをDIさせる。
• MatDialogサービスのopen()メソッドでDialogを開く。configパラメータで画面の大きさ(width・heightパラメータ)の設定や、Dialogに表示させるデータ(dataパラメータ)を渡す。

呼び出し元(app.component.ts)

export class AppComponent {
  dialogData: DialogData = {
    name: '',
    animal: ''
  };
  // 1.MatDialogサービスのDI
  constructor(public dialog: MatDialog) {}

  openDialog() {
    // 2.サービスを使用してmat-dialogをopen
  　　const dialogRef = this.dialog.open(AppDialogComponent , {
      width: '90vw',
      height: '90vh',
      data: this.dialogData
    });
    
    // 3.はAppDialogComponentに記載

　　　　　　　　// ４.ダイアログを閉じた後処理    
    dialogRef.afterClosed().subscribe(
      result => {
        console.log('dialog was closed:', result);
        if (result !== undefined) {
          this.dialogData = result;
        }
      }
    );
  }
}

呼び出し先(app.component.dialog.ts)

import ・・・
export interface DialogData {
  animal: string;
  name: string;
}

@Component({
  selector: 'app-dialog-component',
  templateUrl: './app.dialog.component.html',
  styleUrls: ['./app.dialog.component.css']
})
export class AppDialogComponent {

  //3.コンストラクターでDialogを参照するためのクラス(MatDialogRef<T>)をDI
　　　　//呼び出し元で設定したdataパラメータ(DialogData)を設定
  constructor(
    public dialogRef: MatDialogRef<AppDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData
  ) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}

app.component.dialog.html

<div>
  <div>
    <p>こんにちは、{{data.name}}さん！</p>
  </div>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal" placeholder="好きな動物は？" >
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">閉じる</button>
  <button mat-button [mat-dialog-close]="data">OK</button>
</div>

[mat-dialog-close]="data"とすることで、dialog上で編集したdataを呼び出し元で参照することが可能となる。