【Angular】10分で分かるAngularMaterialのDialogの使い方

1
【Angular】10分で分かるAngularMaterialのDialogの使い方


原田です。今回はDialogについて解説を行います。

ソースコードはGitHubで公開しています。

AngularMaterialの環境構築については、こちらを参照してください。

【Angular】10分でわかるAngularMaterial環境構築

※ Dialogを利用するには、MdDialogModuleをインポートする必要があります。



スポンサーリンク




サンプル

ソースコード

ソースコード解説


呼び出し側のコンポーネントをDialogComponent、表示側のコンポーネントをHelloDialogComponentとしています。

呼び出し側でMdDialogのopenメソッドの引数に、表示側のコンポーネントを指定することでモーダルが表示されます。

サンプルでは、ボタンのクリックイベントでMdDialogにHelloDialogComponentを引数に渡しています。また、MdDialogには第2引数に、以下のパラメータを設定する事ができる。

MdDialogの第2引数に設定できるパラメータ

パラメータ名 概要
data any モーダルに渡すパラメータ。例では、HelloDialogComponentに渡している。
height string モーダルの縦幅。
width string モーダルの横幅。
disableClose boolean モーダルの外側をクリックしたときに、閉じないようにする。

表示側は、MD_DIALOG_DATAをInjectすることでdataを、MdDialogRefをインジェクトすることでモーダルのオブジェクトを取得することができる。

モーダルと閉じる際に、htmlのボタンなどにmd-dialog-closeを、もしくはMdDialogRefのcloseメソッドを実行することでモーダルが閉じる。

そのときに引数に値を設定することで、呼び出し側のafterClosedで、設定した値を取得することができる。

まとめ

Dialogについて解説した。他のコンポーネントと異なり、複雑な点がいくつかあった。


スポンサーリンク




コメントを残す