Manually hide ng2-bootstrap pop-over

Question

<template #popDefinitionsTemplate>
    <h4>{{definitions.title}}</h4>
    <i class="fa fa-times"></i>
    <hr>
    <div [innerHtml]="getDefinitionsPopoverContent()"></div>
</template>
<button class="btn btn-secondary btn-finish-later pull-right" 
        [popover]="popDefinitionsTemplate"
        placement="bottom">
    <i class="fa fa-info-circle"></i> 
</button>

I have this code for displaying popover in my page. I want to include a manual hiding on the close button beside the title, something like this:

<i class="fa fa-times" (click)="popover.hide()"></i>

I'm not quite sure how to implement this one.

Note that this is from https://valor-software.com/ngx-bootstrap/#/popover#popover-config

Answer 1

This is now working:

<template #popDefinitionsTemplate>
    <h4>{{definitions.title}}</h4>
    <i class="fa fa-times" (click)="popDefinitions.hide()"></i>
    <hr>
    <div [innerHtml]="getDefinitionsPopoverContent()"></div>
</template>
<button #popDefinitions="bs-popover" class="btn btn-secondary btn-finish-later pull-right" 
        [popover]="popDefinitionsTemplate"
        placement="bottom">
    <i class="fa fa-info-circle"></i> 
</button>

Good thing I've stumbled upon this thread: https://github.com/valor-software/ngx-bootstrap/issues/1477