【Angular】MatDialogでモーダルダイアログを実装し、ダイアログ側でクリックされたボタンを呼び出し側で受け取る

12月 30, 20221月 1, 2023

今回はAngular Materialを使用してのモーダルダイアログ表示を実装し、ダイアログでクリックされたボタンを呼び出し元画面側で受け取るという動きを作っていきます。

あくまで動きだけを作っていくのでCSS等、見た目は無視していきます。

1. MatDialogでモーダルダイアログを実装する

MatDialogでモーダルダイアログを実装する

今回使用した環境

インターネット接続可能のオンラインの環境

64 ビットオペレーティングシステム

Windows 10 22H2

Angular CLI: 13.3.10

Node: 16.15.0

準備（Materialモジュールの追加）

コマンドで「ng add @angular/material」を実行します。今回は以下の選択としました。

Would you like to proceed? Yes

Set up global Angular Material typography styles? No

Set up browser animations for Angular Material? Yes

ソース

コンポーネントの説明としては、「MessageTestComponent」が呼び出し元画面、「MessageDialogComponent」が呼び出されるメッセージダイアログの画面です。

「app.module.ts」は「// 追加」のコメントがある行が新しく追加となっています。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MessageTestComponent } from './message-test/message-test.component'; // 追加
import { MessageDialogComponent } from './message-dialog/message-dialog.component'; // 追加
import { MatDialogModule } from '@angular/material/dialog'; // 追加

@NgModule({
  declarations: [
    AppComponent,
    MessageTestComponent,  // 追加
    MessageDialogComponent // 追加
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatDialogModule, // 追加
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [MessageDialogComponent] // 追加
})
export class AppModule { }

以下は呼び出し元画面の「MessageTestComponent」です。

<p>message-test works!</p>
<button (click)="displayMessage();">メッセージ表示</button>

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MessageDialogComponent } from '../message-dialog/message-dialog.component';

@Component({
  selector: 'app-message-test',
  templateUrl: './message-test.component.html',
  styleUrls: ['./message-test.component.css']
})
export class MessageTestComponent implements OnInit {

  constructor(
    private dialog: MatDialog,
  ) { }

  ngOnInit(): void {
  }

  displayMessage() {
    const dialogRef = this.dialog.open(MessageDialogComponent, {
      data: { title: "確認", message: "今日の夜飲みに行きませんか？" },
      disableClose: true,
    })

    dialogRef.afterClosed().subscribe((ref) => {
      alert(ref);
    })
  }
}

以下はメッセージダイアログの「MessageDialogComponent」です。

<p>message-dialog works!</p>
<br />
{{data.title}}
<br />
{{data.message}}
<br /><br />
<button (click)="clickOK()">OK</button>
<button (click)="clickCancel()">キャンセル</button>

import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

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

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: any,
    public matDialogRef: MatDialogRef<MessageDialogComponent>
  ) { }

  ngOnInit(): void {
  }

  clickOK() {
    this.matDialogRef.close('ok');
  }

  clickCancel() {
    this.matDialogRef.close('cancel');
  }
}