CODEWITHSUNDEEP
angularpopoverng-bootstrap
user6781
user6781

Reputation: 303

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!

Upvotes: 0

Views: 46

Answers (2)

Mohamed Oussema Njimi
Mohamed Oussema Njimi

Reputation: 36

Try this Approch

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

<tr>
   <th class="th" scope="col">
      Name
      <i 
         class="bi bi-three-dots" 
         #popover="ngbPopover"
         placement="bottom"
         [ngbPopover]="namePopContent" 
         popoverTitle="Edit Name"
         triggers="click:outside"
         [autoClose]="'outside'"
      ></i>
   </th>
</tr>
  • #popover="ngbPopover" allows programmatic control of the popover.
  • triggers="click:outside" ensures that clicking outside will close the popover.
  • popover.close() in the filterName() method closes the popover once you apply the filter.

This setup should work smoothly with ng-bootstrap and provide the desired user experience.

Upvotes: 0

Eliseo
Eliseo

Reputation: 58019

See, in the docs the api

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

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

Upvotes: 0

Related Questions