angularpopoverng-bootstrap

How to call a function on popover close?

I am using ng-bootstrap popover like below:

<ng-template #namePopContent>
   <input type="text" id="name" [(ngModel)]="name"/>
   <i class="bi bi-check" (click)="filterName()"></i>
</ng-template>

<tr>
   <th class="th" scope="col">
      Name
      <i [autoClose]="'outside'" placement="bottom" [ngbPopover]="namePopContent"></i>
   </th>
</tr>

The idea is to get users' input and then filter items based on their input. However, currently, the user must click on check icon to call the filterName() function, and then click outside to close the popover. Is there anyway to call the filterName() by clicking outside the popover? (I want to skip clicking on check icon )

Edit: Maybe other question could be: how to ensure a popover is closed, if so, call the function!

Solution

  • See, in the docs the api

    In the "output"s you can see the hidden. So you use

    <i [ngbPopover]="namePopContent"
   (hidden)="yourFunction()" ... </i>