Получить доступ к переменной внутри HTML из компонента для Angular 2 Typescript

У меня есть следующий код для отображения модального всплывающего окна из ng-bootstrap. В примере есть кнопка, при нажатии на которую вызывается функция open(content) для отображения представления. Как видите, #content определено в шаблоне HTML. Однако это не совсем то, чего я хочу. Я хочу полностью избавиться от кнопки и вызвать это всплывающее окно программно. Поэтому мне нужно как-то получить ссылку на #content в моем компоненте.

<template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>

  <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="c('YES')">YES</button>
      <button type="button" class="btn btn-secondary" (click)="c('NO')">NO</button>
  </div>
</template>

<!--I dont want this button to trigger the template in my actual app. So imagine this code is not here!-->
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>  

Код open(content) в компоненте:

open(content) {
    this.modalService.open(content).result.then((result) => {
        this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
}

Например, я хочу сделать что-то вроде:

// In this example, content is undefined as I am not and can not pass #content through from the HTML since it is not triggered by a button press like the demo
if (myCustomCondition == true ) {
    this.modalService.open(content).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
}