Add html to Bootstrap popover in angular 6

Question

I am using bootstrap popover in angular 6. I want to add some html code to the contents.

<button (click)= "changeClass = !changeClass;"
              type="button"
              class="btn actionButton"
              [style.opacity] = "getStyle()"
              placement="left"
              popoverClass="popover"
              ngbPopover="Here i want to add some html code" > <img src="assets/images/dots.png"> </button>

Please help me out

Answer 1

Give it a reference to a template.

Straight from the docs:

<ng-template #popContent>Hello, <b>{{name}}</b>!</ng-template>
<button type="button" class="btn btn-outline-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content">
  I've got markup and bindings in my popover!
</button>

Answer 2

This will work.

<div>
    <ng-template #popContent>
        <div>

        </div>
    </ng-template>

    <button type="button" class="btn btn-link" [ngbPopover]="popContent" placement="bottom-right" #p="ngbPopover">
    </button>
</div>