How to close popover after certain interval in Angular?

Question

I am using Angular(14) and ngxbootstrap(https://valor-software.com/ngx-bootstrap/#/components/popover?tab=overview). I am unable to see closing the popover automatically after certain interval. It has show()/hide() functions but how do we achieve this? Show the popover and close after certain interval?

Answer 1

According to the documentation of ngx-bootstrap you can use the isOpen attribute to close the popover.

Using the example provided in their documentation:

<p>
  <span popover="Hello there! I was triggered by changing isOpen property"
    triggers=""  [isOpen]="isOpen">
    This text has attached popover
  </span>
</p>
<button type="button" class="btn btn-primary"
  (click)="isOpen = !isOpen">
  Toggle
</button>

You could bind a function to the click event that would trigger a timeout to close your popover:

Add the onPopOverClick method in the .html file:

<button type="button" class="btn btn-primary"
  (click)="onPopOverClick()">
  Toggle
</button>

And in the .ts file:

onPopOverClick(): void {
  this.isOpen = true;
  setTimeout(() => {
    this.isOpen = false;
  }, 5000); // the delay before popover closes automatically
}