対象

・Angularの4系以上
・Angular Material使用

背景

Angular Materialのモーダルウィンドウのデフォルト設定では、モーダルウィンドウ以外の範囲をクリックするとクローズします。（モーダルウィンドウ以外の範囲をクリックすると、ウィンドウが閉じてしまいます。）
このデフォルト設定によって、ユーザーが意図しない動作を発動しやすくなるため、ウィンドウが閉じないように実装する必要がありました。

実装

app.component.ts


import { Component } from '@angular/core';
import { MatDialog } from '@angular/material';
import { DialogComponent } from './dialog/dialog.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ]
})
export class AppComponent  {
  constructor(
    public dialog: MatDialog
  ){}

  openDialog(){
   const dialogRef = this.dialog.open(DialogComponent, {
     width: '300px',
     height: '200px',
     disableClose: true//これによってモーダルウィンドウ範囲外のところをクリックしても閉じない
   });
  }
}

デモ→
https://stackblitz.com/edit/angular-doclj4?file=src%2Fapp%2Fapp.component.ts