ngx-bootstrapでモーダルダイアログ作成

ngx-bootstrapを用いてモーダルダイアログを表示する方法

1. 呼び出し側のHTML
   ダイアログのComponentを呼び出し側のHTMLに記述する。

・・・
<app-sample #sampleDialog></app-sample>
・・・

1. 呼び出し側のTypescript
   ダイアログComponentを宣言し、ダイアログ側のopen関数を呼び出す

@ViewChild("sampleDialog") sampleComponent: SampleComponent;
・・・
click(): void { //ダイアログを表示するボタンのクリック処理
  this.sampleComponent.open();
}
・・・

1. ダイアログ側のHTML

<div class="modal fade" bsModal #sampleModal="bs-modal" tabindex="-1" [config]="{backdrop: 'static'}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
     ・・・
      </div>
    </div>
  </div>
</div>

このままでは自動的に余白ができてしまう。もし余白をなくすのであれば

<div class="modal-body" style="padding:0px;">

とする

1. ダイアログ側のTypescript
   ModalDirectiveを宣言し、それを用いて表示/非表示を行う

@ViewChild("sampleModal") modalRef: ModalDirective;
・・・
open(): void {
  this.modalRef.show();
}

onClickClose(): void {
  this.modalRef.hide();
}
・・・