title: Angular 2 ng-template not rendering in dom inside component
body: <p>I have a component like so</p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
  
  @Component({
      selector: 'details',
      templateUrl: 'details.component.html',
      styleUrls: ["./details.component.scss"],
  })
  export class DetailsComponent {
  
      constructor(
          private modalService: NgbModal
      ) {
      }
  
      open(content) {
          this.modalService.open(content).result.then((result) =&gt; {
              console.log("closed");
          }, (reason) =&gt; {
              console.log("dismissed");
          });
      }
  
  }
  </code></pre>
  
  <p>the html is, notice the popover component at the very top</p>
  
  <pre><code>&lt;popover&gt;&lt;/popover&gt;
  &lt;div class="row"&gt;
      &lt;div class="col"&gt;
          &lt;table class="table"&gt;
              &lt;thead&gt;
                  &lt;th&gt;Action&lt;/th&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;button (click)="open(popover)"&gt; open &lt;/button&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The open component is just a component to display html</p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  
  @Component({
      selector: 'popover',
      templateUrl: 'popover.component.html',
      styleUrls: ["./popover.component.scss"],
  })
  export class PopOverComponent {
  
      constructor(
      ) {
      }
  
  }
  </code></pre>
  
  <p>and the html for the popover component</p>
  
  <pre><code>&lt;ng-template #popover let-c="close" let-d="dismiss"&gt;
      &lt;div class="modal-header"&gt;
      &lt;h4 class="modal-title"&gt;Modal title&lt;/h4&gt;
          &lt;button type="button" class="close" aria-label="Close" (click)="d('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;p&gt;One fine body&amp;hellip;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-secondary" (click)="c('Close click')"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>My issue is when I have ng-template wrapped around test, the h1 test element doesn't render in the dom. More explicitly, ng-template doesn't render which is what I need to pass the #popover to the open function to open the popover.</p>
  
  <p>When I remove the ng-template, I can see h1 test. I need the ng-template to render in the dom and I'm putting i in a component because there's a lot of html in the popover component.</p>
  
  <p>Any idea why this is behaving this way?</p>