CODEWITHSUNDEEP
angularangular-bootstrap
GrahamJRoy
GrahamJRoy

Reputation: 1643

ngbPopover with html returned from a function

I have an ngbPopover which makes a call to return the html I want to populate it with. I have read from the docs (click here) that I need to use a template, and if I put html in this it's fine, but I want a function to return the html, but this just comes out as a string.

<ng-template #popContent>{{getConnBreakdown(opp)}}</ng-template>
<button type="button" class="btn btn-outline-secondary mr-2" placement="top" [ngbPopover]="popContent" popoverTitle="Connection Types">{{ getTotalConnections(opp) }}</button>

and the function looks like:

getConnBreakdown(opp: IOpportunity){
  let returntable = '<table><tbody>';
  this.connectonTypes.map(t => 
    returntable +=  '<tr><td>' + t.name + '<td><td>' + opp.products.filter(p => p.connectionTypeId === t.id).reduce((a, b) => { return a + b.quantity; }, 0) + '</td></tr>'
  );
  returntable += '</tbody></table>';
  return returntable;
}

I've tried binding to innerHTML

<ng-template #popContent ng-bind-html="getConnBreakdown(opp)"></ng-template>

but I always just get the html as a string.

Upvotes: 0

Views: 536

Answers (1)

Tommy
Tommy

Reputation: 2453

You can use innerHTML inside a <div> that in located in your templates, as shown in this answer. Modify your <ng-template> like this:

<ng-template #popContent>
    <div [innerHTML]="getConnBreakdown(opp)"></div>
</ng-template>

Here is a running stackblitz that I modified and got this result (I also adjusted the placement to properly show it for this example):

Stackblitz result

Good luck!

Upvotes: 1

Related Questions