Angular 2 ng template not executing in dom inside component

I have a component like this

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) => {
            console.log("closed");
        }, (reason) => {
            console.log("dismissed");
        });
    }

}

      

        
        
        
      

    

html, notice the popover component at the very top

<popover></popover>
<div class="row">
    <div class="col">
        <table class="table">
            <thead>
                <th>Action</th>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <button (click)="open(popover)"> open </button>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
</div>

      

        
        
        
      

    

The public component is just a component for displaying html

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'popover',
    templateUrl: 'popover.component.html',
    styleUrls: ["./popover.component.scss"],
})
export class PopOverComponent {

    constructor(
    ) {
    }

}

      

        
        
        
      

    

and the html for the popover component

<ng-template #popover 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('Close click')">Close</button>
    </div>
</ng-template>

      

        
        
        
      

    

My problem is that I have an ng template wrapped around the test, the h1 test element is not showing in the dom. More explicitly, ng-template does not display that I need to pass #popover to a public function in order to open the popover.

When I remove the ng template, I see the h1 test. I need ng template to render in dom and I put myself in component because there is a lot of html in popover component.

Any idea why it behaves this way?