AngularでModal実装する

<!--The content below is only a placeholder and can be replaced.-->
<div class="item-wrap">
// 要素へクリックイベントを作成する
  <span (click)="showModal(modalView)">クリック</span>
</div>
// 実際に表示されるモーダル
<ng-template #modalView>
  <div>
    モーダルだよ
  </div>
</ng-template>

// 必要なライブラリをインポートしていく
import { Component, OnInit, TemplateRef, ViewChild } from "@angular/core";
import { BsModalService, BsModalRef } from "ngx-bootstrap/modal";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  // ViewChildでhtml側のモーダル要素を指定する
  @ViewChild("modalView") modalView: TemplateRef<any>;
  // BsModalRefを定義したプロパティを用意する
  modalRef: BsModalRef;

  // モーダルを開くshow()を使用する為にBsModalServiceを定義します。
  constructor(private modalService: BsModalService) {}
  ngOnInit() {}
  // クリックイベントの引数にViewChildで指定した値を定義
  showModal(modalView: TemplateRef<any>) {
    // BsModalRefへモダールを開く指示を代入
    this.modalRef = this.modalService.show(modalView);
  }
}