Type 'HTMLElement' is not assignable to type 'string | TemplateRef<any>' when trying to use HTML template for ngx-popover

Question

I am trying to use an HTML tempalte for my Popover

Here is my markup

<li class="nav-item">
    <a class="nav-link" [popover]="myPopover"
       role="button">
        <i class="fas fa-filter"></i>
    </a>
    <popover-content #myPopover
                     title="this header can be omitted"
                     [closeOnClickOutside]="true">
        <b>Very</b> <span style="color: #C21F39">Dynamic</span> <span style="color: #00b3ee">Reusable</span>
        <b><i><span style="color: #ffc520">Popover With</span></i></b> <small>Html support</small>.
        Click outside of this popover and it will be dismissed automatically.
    </popover-content>
</li>

But it shows a compile error like this

> error TS2322: Type 'HTMLElement' is not assignable to type 'string |
> TemplateRef<any>'.   Type 'HTMLElement' is not assignable to type
> 'string'.
> 
> 70               <a class="nav-link" [popover]="myPopover"
>                                       ~~~~~~~

I didnt understand what did I missed

Answer 1

i think you need to wrap your popover in a ng-template.

<li class="nav-item">
    <a class="nav-link" [popover]="myPopover"
       role="button">
        <i class="fas fa-filter"></i>
    </a>
    <ng-template #myPopover>
        <popover-content title="this header can be omitted" [closeOnClickOutside]="true">
            <b>Very</b> <span style="color: #C21F39">Dynamic</span> <span style="color: #00b3ee">Reusable</span>
            <b><i><span style="color: #ffc520">Popover With</span></i></b> <small>Html support</small>.
            Click outside of this popover and it will be dismissed automatically.
        </popover-content>
    </ng-template>
</li>