Angularでモーダルダイアログを表示する方法

Web アプリケーションでモーダル ダイアログを使用することはかなり一般的です。別のページに移動せずにテーブル内のレコードを編集する場合、データを検索する場合、または単にユーザーに警告メッセージを表示する場合でも、モーダル ダイアログを使用すると優れたユーザー エクスペリエンスが得られる可能性があります。残念ながら、サードパーティのライブラリがなければ、 Angularでこれを行うのはそれほど簡単ではありません。それには、重要なコードを作成し、Angular フレームワークの内部メカニズムを理解する必要があります。これが、Angular でモーダル ダイアログを表示するためのライブラリを Developer Partners で開発した理由です。この記事ではライブラリを使用します。

1. ライブラリをインストールする

@developer-partners/ngx-modal- dialogライブラリを NPM 経由でインストールし、それを使用できるように Angular モジュールに含める必要があります。これをインストールするための NPM コマンドは次のとおりです。

npm install @developer-partners/ngx-modal-dialog

次に、モーダル ダイアログを使用する必要がある Angular モジュールにこれを含める必要があります。私たちのデモ アプリケーションは非常に小さく、AppModule というモジュールが 1 つだけあります。 AppModule Angular モジュールの imports 配列にライブラリから ModalModule を含める必要があります。

準備は完了です。アプリケーションでモーダル ダイアログ コンポーネントの使用を開始できます。

2. モーダルダイアログを表示する

前に述べたように、書籍リストに書籍を追加または編集する場合は、モーダル ダイアログを表示します。まず、書籍のリストを表示するコンポーネントを作成しましょう。新しい Angular コンポーネントを作成し、 BookListComponentという名前を付けます。

これはBookListComponent Typescript クラスの内容です。

BookListComponentクラスは、わかりやすくするために、テーブルに表示するデータとしてハードコードされた書籍のリストを使用します。また、モーダル ダイアログを表示できるようにするために、ngx-modal-dialog ライブラリのModalService Angular サービスも必要です。そのため、それをコンストラクターに挿入しました。

次に、書籍のリストを HTML テーブルに表示するBookListComponentの HTML ファイルを作成します。

上記の HTML コードは非常に単純です。本のリストを表で表示します。 「新しい本を追加」というボタンもあります。

これまでの UI は次のようになります。

[新しいブックの追加] ボタンをクリックすると、Typescript クラスのcreateBook関数が呼び出されます。 createBook関数は、テーブルに新しい書籍を追加するためのモーダル ダイアログを表示します。これは、 createBook関数の Typescript コードです。

createBook関数は、 ModalServiceクラスのshow関数を呼び出してモーダル ダイアログを表示します。 show関数は 2 つのパラメータを取ります。モーダル ダイアログ内に表示する Angular コンポーネントのクラスと、タイトル、サイズ、位置、その他いくつかのダイアログの設定であるモーダル ダイアログのオプションです。モーダル ダイアログの本体に表示するには、Angular コンポーネントが必要です。このコンポーネントがなければ、モーダル ダイアログは画面に重なる空のパネルに過ぎません。そのコンポーネントはCreateEditBookComponentで、上のスクリーンショットのshow関数の最初のパラメーターです。

CreateEditBookComponent Angular コンポーネントは、本の追加と編集の両方を担当します。まず、新しい書籍を追加するコードに取り組みます。以下は、CreateEditBookComponent の HTML コードです。このコードには、作成する本の ID とタイトルを入力するためのフィールドがいくつかあり、ダイアログを閉じてデータを保存するためのボタンがあります。

モーダル ダイアログ UI は次のようになります。

CreateEditBookComponent コンポーネントの Typescript コードは次のとおりです。

CreateEditBookComponentコンポーネントは、 ModalReferenceという Angular サービスを使用します。 ngx-モーダル-ダイアログ図書館。このサービスは、モーダルを閉じる、イベントをサブスクライブするなど、コンポーネントが配置されているモーダル ダイアログと対話するために使用します。上のスクリーンショットでは、 cancel関数でモーダル ダイアログを閉じているだけです。 HTMLの「キャンセル」ボタンがクリックされたときにキャンセル関数を呼び出します。 HTML コードの「保存」ボタンをクリックすると、 saveData関数を呼び出すフォームが送信されます。 saveData関数では、 cancel関数と同様にモーダル ダイアログを閉じますが、リストに新しい本を追加するためのデータを含むbookプロパティも渡します。

ModalReferenceサービスはジェネリック タイプです。 ModalReferenceサービスのcloseSuccess関数を呼び出すときは、同じ型のオブジェクトをそのジェネリック パラメーターとして渡す必要があります。私たちの場合、それはBookという Typescript インターフェイスです。 closeSuccess関数に渡すパラメーターは、ModalServiceクラスのshow関数を呼び出すことによって、モーダル ダイアログを作成したコンポーネントに戻されます。

ModalReference サービスの closeSuccess 関数を呼び出すと、モーダル ダイアログが閉じられ、RxJS イベントがトリガーされ、新しく作成されたブックがそのイベントのサブスクライバーに渡されます。上のスクリーンショットでは、コールバック関数のnewBookパラメーターは、モーダル ダイアログから受け取った新しく作成されたブックであるため、UI に表示するにはそれをブックス配列に追加するだけです。

3. モーダルダイアログへのデータの受け渡し

モーダル ダイアログにデータを渡す必要がある場合があります。たとえば、リストから書籍を編集したい場合、編集したい書籍レコードをモーダル ダイアログに渡し、変更したい初期データを取得できます。

まず、行データを編集するためのボタンをテーブルの行に追加します。

テーブルの各行に [編集] ボタンがある UI は次のようになります。

editBook関数のコードはcreateBook関数とほぼ同じですが、重要な違いが 1 つだけあります。ダイアログ オプションのモデルプロパティを使用して、編集する書籍をモーダル ダイアログに渡します。

modelプロパティを使用してモーダル ダイアログに渡すパラメーターは、 config.modelプロパティを介してダイアログ内で使用されるコンポーネントのModalReferenceサービスで使用できるようになります。

上のスクリーンショットでは、渡されたパラメーターをコピーし、それをCreateEditBookComponentコンポーネントのbookプロパティに割り当てています。 ModalReference.configオブジェクトのモデルプロパティは参照によって渡されるため、そのオブジェクトのプロパティに加えた変更は書籍のリストを表示するテーブルに反映されます。これをコピーする理由は、ユーザーが「保存」ボタンをクリックするまでテーブル内の行を変更しないためです。 「キャンセル」ボタンをクリックすると、テーブルデータは更新されません。

[ブックの編集] モーダル ダイアログは次のようになります。

結論

Angular のモーダル ダイアログを最初から構築するのは簡単ではありませんが、モーダル ダイアログ ライブラリを使用するとはるかに簡単になります。ライブラリを設定し、プロジェクトでモーダル ダイアログを表示するためにそれを使用する方法を説明しました。ダイアログの最も基本的な使用例と機能について説明しましたが、@developer-partners/ngx-modal-dialog ライブラリには、実際のプロジェクトで役立つ可能性のある他の機能がたくさんあります。

詳細については、以下のリンクを参照してください。

@developer-partners/ngx-modal-dialog

モーダル ダイアログに優れた読み込みスピナーを表示したい場合は、Angular での読み込みスピナーの構築に関する記事を参照してください。

Angular でローディング スピナーを作成する方法