Angular7でマテリアルデザインを使っているのですが、ダイアログを表示した際に画面外クリックでダイアログが閉じるのを禁止したいんです！
ということで、画面外クリックでダイアログが閉じるのを禁止する方法を解説します！
僕の環境
OS：Windows10
Angular：7
公式サイト
以下が公式サイトになります。
URL：「https://material.angular.io/components/dialog/overview」
DialogのAPI
|
1 |
import { MatDialogModule } from '@angular/material/dialog'; |
上記を「app.module.ts」に追記します。
実装手順
|
1 |
import { MatDialog } from '@angular/material'; |
上記をコンポーネントのTypeScriptに追記します。
|
1 |
constructor(private dialog: MatDialog) {} |
「MatDialog」をDI(依存性注入)します。
|
1 2 3 4 5 |
this.dialog.open(SampleComponent, { height: '250px', width: '250px', disableClose: true }); |
「dialog.open」でダイアログを開きます。
第1引数にダイアログで表示するコンポーネントを、第2引数にオプションを設定できます。
「disableClose」をtrueに設定することで、画面外クリックを禁止できます。
※オプションには、上記のように「height」や「width」などを設定することもできます。
おすすめ書籍
僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ！
まとめ
画面外のクリック禁止は意外と簡単でしたね。
簡単なんですが、情報の少なさが半端じゃないですね。
今後もこういう細かすぎる情報を公開していきます！
