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

2019年5月4日2023年1月12日

当ページのリンクには広告が含まれている場合があります。

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を指定することです。

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

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