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

2
【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について解説した。他のコンポーネントと異なり、複雑な点がいくつかあった。


スポンサーリンク




  1. Forever Multi-maca

    What’s up,I read your blog named “【Angular】10分で分かるAngularMaterialのDialogの使い方 | 駆け出しプログラマーのテックブログ regularly.Your writing style is awesome, keep doing what you’re doing! And you can look our websi…

コメントを残す