ngx bootstrap popover move the html string creation to HTML template file

Question

I am using ngx bootstrap http://valor-software.com/ngx-bootstrap/#/popover#popover-directive

I am using dynamic html style to display html in the popover body as follows:

<span *ngFor="let item of items;">
    <template #popTemplate><div [innerHtml]="getPopoverDetails(item)"></div></template>
    <img class="appIcon" [src]="item.image" [popover]="popTemplate"/>                                  
</span>     

In controller:

private getPopoverDetails(item) {
        let content = '<img class="" src="' + (item.image) + '"/>';
        content += '<span class="popup">' + (item.name) + '</span>' +
                '<div class="row popup">' +
                     '<div class="col-xs-12">' +
                         '<span>XXX</span>' +
                     '</div>' +
                '</div>' +
                '<div class="row popup">' +
                     '<div class="col-xs-12">' +
                         '<span>' + ((typeof item.cost !== 'undefined') ? (item.cost) : '') + '</span>' +
                     '</div>' +
                '</div>' +
                '<div class="row popup">' +
                     '<div class="col-xs-12">' +
                         '<span>yy</span>' +
                     '</div>' +
                '</div>' +
                '<div class="row popup">' +
                     '<div class="col-xs-12">' +
                         '<span>' + ((typeof item.cost !== 'undefined') ? 'zz' : 'yy') + '</span>' +
                     '</div>' +
                '</div>';
        return content;
}

Now, with the above approach, I am having to build my HTML string in controller etc. since, it is HTML, is there a clean way to build it in HTML template file itself? I do not want to put html string creation in controller or any other typescript helper function. HTML would look better in HTML template itself. Is it possible?

Answer 1

this should help: move html from function to template:

<template #popTemplate><div>
  <img class="" [attr.src]="item.image"/>
  <span class="popup">{{ item.name }}</span>
  <!-- and so on, put html from function here -->
</div></template>