Issue
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?
Solution
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
}
Answered By - J. Bosi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.