Way to trigger ngx-bootstrap popover over a link

Question

I want to use ngx-bootstrap popover over a link, ones I click on that link, a popover will show in the bottom.

in ngx-bootstrap website: I found that we can use a Button with a custom template in order to show whatever we want inside that popover this way:

<ng-template #popTemplate>Just another: {{content}}</ng-template>
<button type="button" class="btn btn-warning"
        [popover]="popTemplate" popoverTitle="Template ref content inside">
  TemplateRef binding
</button>

I'm interested to use this ng-template example to show in my case user information ones we click on a linked image of that user.

So while trying for example this way I'm not able to trigger this popover:

<a href="#" role="button" (click)="popTemplate.show()" placement="bottom">
  <span>
    <img src="urlPhoto"></img>
  </span>
</a>
<ng-template #popTemplate>Here we go
  name: {{user.name}}
</ng-template>

I'm looking to do something similar to what we have in this question:

Bootstrap Popover - how add link in text popover?

but using ngx-bootstrap popover.

Has someone any idea about the proper way to do this ?

Currently I've this error in the console:

Answer 1

try this code

<a href="#" [popover]="popTemplate" role="button"  placement="bottom">
  <span>
    <img src="urlPhoto"></img>
  </span>
</a>
<ng-template #popTemplate>Here we go
  name: {{user.name}}
</ng-template>