1

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

Arnaud Denoyelle
  • 29,980
  • 16
  • 92
  • 148
Sandeep Thomas
  • 4,303
  • 14
  • 61
  • 132
  • `myPopover` refers to the `` element which is an `HTMLElement` and it seems that you assign it to an input that is supposed to be a `string`, hence the error message. Can you try `[popover]="myPopover.innerText"` or `[popover]="myPopover.innerHTML"` ? – Arnaud Denoyelle Oct 28 '21 at 13:55

1 Answers1

4

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>
DrakeAnglin
  • 718
  • 1
  • 4
  • 12