月間26,000PV達成! 収益は毎日発生中! ギランバレー症候群に関する情報を集めています

【Angular7】MaterialのDialogで画面外クリックを禁止!

【Angular7】MaterialのDialogで画面外クリックを禁止!
Advertisement

 

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

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

 

 

僕の環境

OS:Windows10

Angular:7

 

 

公式サイト

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

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

 

 

DialogのAPI

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

 

 

Advertisement

 

実装手順

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

 

 

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

 

 

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

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

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

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

 

 

おすすめ書籍

僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ!

 

 

 

まとめ

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

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

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

Travelerを知らないの?