ngx bootstrap popoverTitle render as HTML

Question

I am using ngx bootstrap popver: http://valor-software.com/ngx-bootstrap/#/popover#popover-directive. I am able to render popover body as HTML. However, that does not work for PopoverTitle. The documentation says that popover type is string | TemplateRef and PopoverTitle is a string, so probably I cannot render title as html for popovertitle as I did for popover body. In the code below: I get popover body contents as HTML as expected. But, not for popoverTitle.

< span *ngFor="let item of items;">
    < template #popTemplate>
        <div [innerHtml]="getPopoverDetails(item)"></div>
    < /template>
    < template #popTemplate1><div [innerHtml]="getPopoverTitle(item)"></div>
    < /template>
    < img class="" [src]="item.image" [popover]="popTemplate" [popoverTitle]="popTemplate1" triggers="mouseenter:mouseleave" 
placement="right"/>                                  
< /span>  

I think that is because popoverTitle does not support TemplateRef. In that case, is there anyway to render popoverTitle string as HTML (reason being my title contents are not plain text, I need to put images and other html content as well)

Answer 1

< span *ngFor="let item of items;">
    < template #popTemplate>
        <div class="popover-title popover-header" [innerHtml]="getPopoverTitle(item)" style="margin:-10px -10px -0px -10px;">
        <div [innerHtml]="getPopoverDetails(item)"></div>
    < /template>
    < img class="" [src]="item.image" [popover]="popTemplate" triggers="mouseenter:mouseleave" 
placement="right"/>                                  
< /span>  

I have modified your code to include your title html content and included popover-title popover-header class as default popover header class and included style to remove the effect of default padding for popover and make it look like popover header