【Angular7】MaterialのDialogで画面外クリックを禁止！ │ 泉浩兵ブログ

Angular7でマテリアルデザインを使っているのですが、ダイアログを表示した際に画面外クリックでダイアログが閉じるのを禁止したいんです！

ということで、画面外クリックでダイアログが閉じるのを禁止する方法を解説します！

■Angular Materialの使い方はこちら

僕のプロフィールはこちら

僕の環境

OS：Windows10

Angular：7

以下が公式サイトになります。

URL：「https://material.angular.io/components/dialog/overview」

import { MatDialogModule } from '@angular/material/dialog';

1	import { MatDialogModule } from '@angular/material/dialog';

上記を「app.module.ts」に追記します。

import { MatDialog } from '@angular/material';

1	import { MatDialog } from '@angular/material';

上記をコンポーネントのTypeScriptに追記します。

constructor(private dialog: MatDialog) {}

1	constructor(private dialog: MatDialog) {}

「MatDialog」をDI(依存性注入)します。

this.dialog.open(SampleComponent, {
    height: '250px',
    width: '250px',
    disableClose: true
});

this.dialog.open(SampleComponent, {

height: '250px',

width: '250px',

disableClose: true

});

「dialog.open」でダイアログを開きます。

第1引数にダイアログで表示するコンポーネントを、第2引数にオプションを設定できます。

「disableClose」をtrueに設定することで、画面外クリックを禁止できます。

※オプションには、上記のように「height」や「width」などを設定することもできます。

画面外のクリック禁止は意外と簡単でしたね。

簡単なんですが、情報の少なさが半端じゃないですね。

今後もこういう細かすぎる情報を公開していきます！