やっほー
【Angular7】MaterialのModalで画面外クリックを禁止!

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

  • 2019年1月28日
  • 2021年3月19日
  • Angular
  • 59view

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

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

AngularMaterialの使い方はこちら

AngularとMaterialデザインの組み合わせって素晴らしいーー。 AngularはGoogleが開発したフレームワークなので、Materialデザインを惜しみなく使うことができます。 ということで今回は、Angularで[…]

【Angular7】Materialデザインの使い方を解説!

公式サイト

こちらが公式サイトになります。

DialogのAPI

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

実装手順

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

 

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

 

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

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

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

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

おすすめ書籍

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

まとめ

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

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

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

【Angular7】MaterialのModalで画面外クリックを禁止!
フォローしてもらえると泣いて喜びます