title: Angular 2+: Opening Bootstrap modal through typescript
body: <p>Typically, when opening a modal, the function is called through HTML:</p>
  
  <pre><code>&lt;button class="btn btn-lg btn-outline-primary" (click)="open(content)"&gt;Launch demo modal&lt;/button&gt;
  </code></pre>
  
  <p>which would open up the modal:</p>
  
  <pre><code>  &lt;ng-template #content let-modal&gt;
        &lt;div class="modal-header"&gt;
          &lt;h4 class="modal-title" id="modal-basic-title"&gt;Profile update&lt;/h4&gt;
          &lt;button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;form&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="dateOfBirth"&gt;Date of birth&lt;/label&gt;
              &lt;div class="input-group"&gt;
                &lt;input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker"&gt;
                &lt;div class="input-group-append"&gt;
                  &lt;button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"&gt;&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')"&gt;Save&lt;/button&gt;
        &lt;/div&gt;
      &lt;/ng-template&gt;
  </code></pre>
  
  <p>However, due to circumstances (I'm using Google Charts and the HTML where I could use <code>(click) = "open(content"</code> isn't exposed to me), I need to be able to open the modal through javascript/typescript.</p>
  
  <p>I attempted to do so like this: </p>
  
  <pre><code>  open(content) {
  
      this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) =&gt; {
        this.closeResult = `Closed with: ${result}`;
      }, (reason) =&gt; {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
      });
    }
  
    select(event: ChartSelectEvent) {
  
          this.open(content); //&lt;--Attempt to Open Modal
  
          if ('deselect' === event.message) {    
          }
          else if ('select' === event.message) {
  
          }
        }
  </code></pre>
  
  <p>My attempt doesn't open up the modal.  So, I think that what I need to do is how to call a <code>template reference variable (#content)</code> through typescript but I'm not sure how</p>