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

Could you move the solution to an answer? Easier to find for anyone stumbling upon this in the future. See: https://stackoverflow.com/help/self-answer — Matthias Meid, Sep 08 '17 at 06:24
... and don't forget to accept the answer as @a_horse_with_no_name suggested. ;) — Matthias Meid, Sep 08 '17 at 08:01
I've got to wait 2 days (after posting the question) before accepting it as answer :| — jengfad, Sep 09 '17 at 09:23

score 0 · Accepted Answer · edited Sep 08 '17 at 08:01

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

Manually hide ng2-bootstrap pop-over

1 Answers1