Angular

【Bootstrap4】Angular7でTypeScript側からモーダルダイアログを表示する方法

dual-screen

Bootstrapって便利ですよね。

よく使う機能は色々あると思いますが、モーダルダイアログも結構利用頻度が高いのではないでしょうか?
例えば、フォームへの入力中に離脱しようとすると、「入力された情報が消えてしまいますがよろしいですか?」みたいなメッセージが表示されたりしますよね。

そのモーダルダイアログですが、Bootstrap4のサンプル通りに実装すると、HTML上にあるボタンをクリックしたタイミングで表示される感じになると思います。

ですが、せっかくAngularとTypeScriptで作業しているのであれば、TypeScript側からモーダルダイアログを開くようにしたいですよね。

先日、TypeScript側からモーダルダイアログを開くように実装する機会があったので、その際のメモをまとめようと思います。

そんなわけで、今回はTypeScript側からBootstrapのモーダルダイアログを開く方法についてご紹介しますね。

TypeScript側からモーダルダイアログを開く方法

イメージとしては、非表示のボタンを用意して、TypeScript側から任意のタイミングでそのボタンをクリックする感じです。

こちらのスタックオーバーフローが参考になりました。ありがとうございます。
参考:How to use code to open a modal in Angular 2?

それでは、コードで確認していきましょう。

まずは、先ほどの公式の「Live demo」を参考に、モーダルダイアログを実装します。

<div class="modal fade" id="modalDlg" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Title</h5>
      </div>
      <div class="modal-body">Body</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">OK</button>
      </div>
    </div>
  </div>
</div>

次に、モーダルダイアログを呼び出すボタンを用意しましょう。
上記コードに以下を追加してください。

<button id="openModalBtn" [hidden]="true"  data-toggle="modal" data-target="#modalDlg">
 hoge
</button>

ここでのポイントは、「[hidden]=”true”」で、非表示にすることです。
非表示部分になるので、button要素のテキストはなんでも構いません。

最後にTypeScript側を実装しましょう。

本来は画面遷移や通信処理などのタイミングで呼び出すことが多いと思います。
しかし、今回は簡単なサンプルの紹介なので、コンストラクタが呼ばれてから10秒後にモーダルダイアログを表示するようにしてみましょう。

export class AppComponent {

  constructor() {
    console.log('Start constructor !');

    setTimeout(() => {
      document.getElementById('openModalBtn').click();
    }, 10000);
  }
}

コンストラクタが呼ばれたタイミングがわかるように、console.log()でログを追加しています。
ここでのポイントは、先ほど非表示にしたボタンのidを指定することです。

それでは早速試してみましょう!

初期表示時の画面は以下となります。

サンプルコードの初期表示状態
サンプルコードの初期表示状態

ログに「Start constructor !」が出力されていますね。

それではそのまま10秒待ちましょう。
すると、以下のようにモーダルダイアログが表示されます。

サンプルコード初期表示から10秒経過後
サンプルコード初期表示から10秒経過後

うまくいきましたね。
画像ではうまく伝わらないと思いますが、普通のモーダルダイアログと同様に、画面上部からスーッと表示されました。

この方法の利点は以下の2点かなと思います。

  • TypeScript側でモーダルダイアログ表示タイミングをコントロールできる
  • モーダルダイアログのアニメーションが正常に動作する

今回はTypeScriptから利用しましたが、もちろんJavaScriptでも利用可能ですよ。

終わりに

今回はTypeScript側から任意のタイミングでBootstrapのモーダルダイアログを開く方法についてご紹介しました。

これでTypeScript側の任意のタイミングで、モーダルダイアログを表示することができますよ。

また、Bootstrap4の機能についてはこちらの本にまとまっていますよ。

今回はここまでです。それでは。