Angular Material モーダルダイアログの詳細設定：backdropClick プロパティと hasBackdrop プロパティ

2024-04-02

Angular バージョン 4.0+ でダイアログ領域の外側をクリックしてもダイアログを閉じない実装方法

Angular Material のモーダルダイアログは、デフォルトでダイアログ領域外の背景部分をクリックすると閉じます。しかし、場合によってはダイアログ領域外をクリックしても閉じないような挙動が必要になることがあります。

Angular バージョン 4.0+ でダイアログ領域外をクリックしてもダイアログを閉じないためには、以下の2つの方法があります。

方法1：backdropClick プロパティを使用する

MatDialogConfig オブジェクトの backdropClick プロパティを設定することで、ダイアログ領域外をクリックしてもダイアログを閉じない設定ができます。

const dialogConfig = new MatDialogConfig();
dialogConfig.backdropClick = false;

const dialogRef = this.dialog.open(MyDialogComponent, dialogConfig);

方法2：click イベントをキャンセルする

ダイアログ領域外の click イベントをキャンセルすることで、ダイアログを閉じるのを防ぐことができます。

<div (click)="stopPropagation($event)">
  <mat-dialog>
    ...
  </mat-dialog>
</div>

stopPropagation(event: Event) {
  event.stopPropagation();
}

方法1は、ダイアログ領域外をクリックしてもダイアログを絶対に閉じたくない場合に適しています。
方法2は、ダイアログ領域外をクリックしてもダイアログを閉じたくない場合がほとんどだが、特定の条件下では閉じられるようにしたい場合に適しています。

補足

上記の方法は、Angular バージョン 4.0+ でのみ動作します。
Angular バージョン 4.0 より前のバージョンを使用している場合は、別の方法を使用する必要があります。

ダイアログ領域外をクリックしてもダイアログを閉じない設定は、ユーザーインターフェースの観点から問題になる可能性があります。ユーザーがダイアログを閉じたいのに閉じられないという状況が発生する可能性があるため、注意が必要です。
ダイアログ領域外をクリックしてもダイアログを閉じない設定を使用する場合は、ユーザーにその旨を伝える必要があります。

方法1：backdropClick プロパティを使用する

<button (click)="openDialog()">ダイアログを開く</button>

<div *ngIf="dialogRef">
  <mat-dialog [config]="dialogConfig">
    <h1>ダイアログタイトル</h1>
    <p>ダイアログの内容</p>
    <button (click)="closeDialog()">閉じる</button>
  </mat-dialog>
</div>

import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';

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

  dialogRef: any;

  constructor(private dialog: MatDialog) {}

  ngOnInit() {}

  openDialog() {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.backdropClick = false;

    this.dialogRef = this.dialog.open(MyDialogComponent, dialogConfig);
  }

  closeDialog() {
    this.dialogRef.close();
  }
}

方法2：click イベントをキャンセルする

<div (click)="stopPropagation($event)">
  <mat-dialog>
    <h1>ダイアログタイトル</h1>
    <p>ダイアログの内容</p>
    <button (click)="closeDialog()">閉じる</button>
  </mat-dialog>
</div>

import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';

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

  constructor(private dialog: MatDialog) {}

  ngOnInit() {}

  stopPropagation(event: Event) {
    event.stopPropagation();
  }

  closeDialog() {
    // ダイアログを閉じる処理
  }
}

上記のコードでは、MyDialogComponent という名前のコンポーネントをダイアログとして使用しています。このコンポーネントは、必要に応じて作成する必要があります。
上記のコードでは、ダイアログを閉じるボタンのクリックイベントに closeDialog() メソッドを設定しています。このメソッドは、必要に応じて変更する必要があります。

ダイアログ領域外をクリックしてもダイアログを閉じないための他の方法

方法3：hasBackdrop プロパティを使用する

const dialogConfig = new MatDialogConfig();
dialogConfig.hasBackdrop = false;

const dialogRef = this.dialog.open(MyDialogComponent, dialogConfig);

ただし、hasBackdrop プロパティを使用すると、ダイアログ領域外をクリックしてもダイアログを閉じられないだけでなく、ダイアログを閉じるための他の方法もすべて使用できなくなることに注意が必要です。

カスタムダイアログコンポーネントを作成することで、ダイアログ領域外をクリックしても閉じないような挙動を自由に実装することができます。

カスタムダイアログコンポーネントを作成する方法は、以下のとおりです。

新しいコンポーネントを作成します。
コンポーネントのテンプレートファイルに、ダイアログの内容を記述します。

以下は、カスタムダイアログコンポーネントの例です。

<div>
  <h1>ダイアログタイトル</h1>
  <p>ダイアログの内容</p>
  <button (click)="closeDialog()">閉じる</button>
</div>

// クラスファイル
import { Component, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

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

  constructor(private dialogRef: MatDialogRef<MyDialogComponent>) {}

  ngOnInit() {}

  closeDialog() {
    this.dialogRef.close();
  }
}